Components
Radio
A set of checkable buttons—known as radio buttons—where only one button can be checked at a time.
This component is made on top of Radix UIs Radio Group Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.
Anatomy
Import all parts and piece them together.
import { RadioGroup, RadioGroupItem } from "@rafty/ui";
<RadioGroup>
<RadioGroupItem />
</RadioGroup>;
Usage
<RadioGroup>
<RadioGroupItem
id="1"
value="1"
>
Radio 1
</RadioGroupItem>
<RadioGroupItem
id="2"
value="2"
>
Radio 2
</RadioGroupItem>
<RadioGroupItem
id="3"
value="3"
>
Radio 3
</RadioGroupItem>
</RadioGroup>
Size
There are 3 size options in progress: sm, md (default) & lg.
<RadioGroup size="sm">
<RadioGroupItem
id="4"
value="1"
>
Radio 1
</RadioGroupItem>
<RadioGroupItem
id="5"
value="2"
>
Radio 2
</RadioGroupItem>
<RadioGroupItem
id="6"
value="3"
>
Radio 3
</RadioGroupItem>
</RadioGroup>
Default Value
<RadioGroup defaultValue="2">
<RadioGroupItem
id="7"
value="1"
>
Radio 1
</RadioGroupItem>
<RadioGroupItem
id="8"
value="2"
>
Radio 2
</RadioGroupItem>
<RadioGroupItem
id="9"
value="3"
>
Radio 3
</RadioGroupItem>
</RadioGroup>
Disabled
Pass the isDisabled prop if you need to disable the radio-group and its sub components.
<RadioGroup
defaultValue="1"
disabled
>
<RadioGroupItem
id="10"
value="1"
>
Radio 1
</RadioGroupItem>
<RadioGroupItem
id="11"
value="2"
>
Radio 2
</RadioGroupItem>
<RadioGroupItem
id="12"
value="3"
>
Radio 3
</RadioGroupItem>
</RadioGroup>