Radio

Overview

Radio is only a wrapper component which contains an hidden radio input.

It gives you benefit of checked props from a radio input and let you customize your component style based on this checked props.

Tailwind CSSA utility-first CSS framework for rapid UI development.

Alpine JSA rugged and lightweight JavaScript framework.

LaravelThe PHP Framework for Web Artisans.

Copied !

import { Radio } from "$components/radio.component";

export function DefaultRadioExample() {
	const radioOptions = [
		{
			title: "Tailwind CSS",
			description: "A utility-first CSS framework for rapid UI development.",
			value: "tailwind"
		},
		{
			title: "Alpine JS",
			description: "A rugged and lightweight JavaScript framework.",
			value: "alpine"
		},
		{
			title: "Laravel",
			description: "The PHP Framework for Web Artisans.",
			value: "laravel",
			disabled: true
		}
	];

	return (
		<div class="flex flex-col gap-4 bg-white rounded p-2">
			{radioOptions.map((option) => {
				return (
					<Radio
						name="radio-group"
						id={option.value}
						value={option.value}
						disabled={option.disabled}
						x-on:change="console.log($event.target.value)"
						class="flex items-start p-5 space-x-3 text-base-dark bg-white border rounded-md shadow-sm hover:bg-info/15 border-base-light peer-checked:border-info peer-checked:[&>svg]:visible peer-checked:[&>*]:text-info peer-disabled:cursor-not-allowed peer-disabled:bg-white peer-disabled:text-base-light"
					>
						<div class="relative flex flex-col text-left space-y-1.5 leading-none">
							<span class="font-semibold" safe>
								{option.title}
							</span>
							<span class="text-sm opacity-75" safe>
								{option.description}
							</span>
						</div>
					</Radio>
				);
			})}
		</div>
	);
}

Tailwind CSSA utility-first CSS framework for rapid UI development.

Alpine JSA rugged and lightweight JavaScript framework.

LaravelThe PHP Framework for Web Artisans.

Copied !

import { Icon } from "$components/icon.component";
import { Radio } from "$components/radio.component";

export function AnotherRadioExample() {
	const radioOptions = [
		{
			title: "Tailwind CSS",
			description: "A utility-first CSS framework for rapid UI development.",
			value: "another-tailwind"
		},
		{
			title: "Alpine JS",
			description: "A rugged and lightweight JavaScript framework.",
			value: "another-alpine",
			disabled: true
		},
		{
			title: "Laravel",
			description: "The PHP Framework for Web Artisans.",
			value: "another-laravel"
		}
	];

	return (
		<div class="flex flex-col gap-4">
			{radioOptions.map((option) => {
				return (
					<Radio
						name="radio-another-group"
						id={option.value}
						value={option.value}
						disabled={option.disabled}
						x-on:change="console.log($event.target.value)"
						class="group/item flex items-start p-5 space-x-3 text-base-dark bg-white border rounded-md shadow-sm hover:bg-muted border-base-light peer-checked:border-info peer-checked:[&>svg]:visible peer-checked:[&>*]:text-info peer-disabled:cursor-not-allowed peer-disabled:bg-white peer-disabled:text-base-light"
					>
						<Icon
							name="ri.check-line"
							stroke-width="3"
							size={6}
							class="invisible"
						/>
						<div class="relative flex flex-col text-left space-y-1.5 leading-none">
							<span class="flex font-semibold" safe>
								{option.title}
							</span>
							<span class="text-sm opacity-75" safe>
								{option.description}
							</span>
						</div>
					</Radio>
				);
			})}
		</div>
	);
}

Installation

Notes

To use this component, you need to initialize your project first. If not done yet, run one of the following command:

npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.

Go to the installation and usage page to learn more.

jsxpine add radio

Copied !


	--------------------     Radio Component   -------------------------

		/**
 * Radio component props
 * @type {import("../common/props").JSXComponent<import("./input.component").RadioInputProps>}
 */
export function Radio(props) {
	const { children, class: className, id, ...restProps } = props;
	return (
		<div>
			<input type="radio" id={id} class="hidden peer" {...restProps} />
			<label for={String(id)} class={className}>
				{children}
			</label>
		</div>
	);
}