Radio
A toggle that allows users to choose between checked and unchecked states.
Usage
import { Radio } from "#/ui/components/Radio"<Radio />Note: Radios are note designed to be used alone. You should always use them within a RadioGroup.
Label
You can pass a label to your Radio to automatically associate it with the Radio.
<Radio label="Accept terms and conditions" defaultChecked />If you need a Radio with accessible text that isn’t visible, you can hide the label
<Radio label="Accept terms and conditions" hideLabel defaultChecked />Optionally, if you need your label separated from your Radio, you can associate them by using the id and htmlFor props.
Size
You can change the size of your Radio by passing the size prop.
<Radio
size="sm" // sm, md, lg
label="size sm"
hideLabel
defaultChecked
/>Icon
You can pass a custom icon if you want to change the default check
<Radio label="custom icon example" hideLabel defaultChecked>
<FaceHappyIcon slot="icon" />
</Radio>You may need to adjust the size of your icon to fit the Radio (this isn’t done for you for custom icons)
Controlled
You can control the state of the Radio from outside of the component by passing the checked and onChange props.
export const Controlled = () => {
const [checked, setChecked] = useState(false)
return (
<Radio
label="controlled example"
checked={checked}
onChange={() => setChecked(!checked)}
/>
)
}Customisation
If you’d like to extend the radio to make a larger clickable area, you can use the RadioCard component.
<RadioCard client:load defaultChecked showCheckbox className="max-w-md flex items-start">
<div className="text-left">
<label htmlFor="custom-checkbox" className="font-bold">
Radio Card
</label>
<p className="text-sm text-gray-500">Try clicking this to see the checkbox in action</p>
</div>
</RadioCard>See more at RadioCard