RadioGroup
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
'use client'
import { Label } from '@nerdfish/react/label'
import { RadioGroup, RadioGroupItem } from '@nerdfish/react/radio-group'
export default function RadioGroupExample() {
return (
<RadioGroup defaultValue="comfortable">
<div className="flex items-center gap-3">
<RadioGroupItem value="default" id="r1" />
<Label htmlFor="r1">Default</Label>
</div>
<div className="flex items-center gap-3">
<RadioGroupItem value="comfortable" id="r2" />
<Label htmlFor="r2">Comfortable</Label>
</div>
<div className="flex items-center gap-3">
<RadioGroupItem value="compact" id="r3" />
<Label htmlFor="r3">Compact</Label>
</div>
</RadioGroup>
)
}
Disabled
'use client'
import { Label } from '@nerdfish/react/label'
import { RadioGroup, RadioGroupItem } from '@nerdfish/react/radio-group'
export default function RadioGroupDisabledExample() {
return (
<RadioGroup defaultValue="disabled-option2">
<div className="flex items-center space-x-2">
<RadioGroupItem
value="disabled-option1"
id="disabled-option1"
disabled
/>
<Label htmlFor="option1">Option 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="disabled-option2"
id="disabled-option2"
disabled
/>
<Label htmlFor="option2">Option 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="disabled-option3"
id="disabled-option3"
disabled
/>
<Label htmlFor="option3">Option 3</Label>
</div>
</RadioGroup>
)
}
Size
'use client'
import { Label } from '@nerdfish/react/label'
import { RadioGroup, RadioGroupItem } from '@nerdfish/react/radio-group'
export default function RadioGroupSizeExample() {
return (
<div className="gap-acquaintances flex flex-col">
<div>
<RadioGroup defaultValue="small-option-0" size="xs">
<div className="flex items-center space-x-2">
<RadioGroupItem value="small-option-0" id="small-option-0" />
<Label htmlFor="small-option-0">Extra Small 0</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="small-option-2" id="small-option-2" />
<Label htmlFor="small-option-2">Extra Small 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="small-option-3" id="small-option-3" />
<Label htmlFor="small-option-3">Extra Small 3</Label>
</div>
</RadioGroup>
</div>
<div>
<RadioGroup defaultValue="small-option-1" size="sm">
<div className="flex items-center space-x-2">
<RadioGroupItem value="small-option-1" id="small-option-1" />
<Label htmlFor="small-option-1">Small 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="small-option-2" id="small-option-2" />
<Label htmlFor="small-option-2">Small 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="small-option-3" id="small-option-3" />
<Label htmlFor="small-option-3">Small 3</Label>
</div>
</RadioGroup>
</div>
<div>
<RadioGroup defaultValue="medium-option-1" size="md">
<div className="flex items-center space-x-2">
<RadioGroupItem value="medium-option-1" id="medium-option-1" />
<Label htmlFor="medium-option-1">Medium 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="medium-option-2" id="medium-option-2" />
<Label htmlFor="medium-option-2">Medium 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="medium-option-3" id="medium-option-3" />
<Label htmlFor="medium-option-3">Medium 3</Label>
</div>
</RadioGroup>
</div>
<div>
<RadioGroup defaultValue="large-option-1" size="lg">
<div className="flex items-center space-x-2">
<RadioGroupItem value="large-option-1" id="large-option-1" />
<Label htmlFor="large-option-1">Large 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="large-option-2" id="large-option-2" />
<Label htmlFor="large-option-2">Large 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="large-option-3" id="large-option-3" />
<Label htmlFor="large-option-3">Large 3</Label>
</div>
</RadioGroup>
</div>
<div>
<RadioGroup defaultValue="extra-large-option-1" size="xl">
<div className="flex items-center space-x-2">
<RadioGroupItem
value="extra-large-option-1"
id="extra-large-option-1"
/>
<Label htmlFor="extra-large-option-1">Extra Large 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="extra-large-option-2"
id="extra-large-option-2"
/>
<Label htmlFor="extra-large-option-2">Extra Large 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="extra-large-option-3"
id="extra-large-option-3"
/>
<Label htmlFor="extra-large-option-3">Extra Large 3</Label>
</div>
</RadioGroup>
</div>
</div>
)
}
With Description
'use client'
import { Label } from '@nerdfish/react/label'
import { RadioGroup, RadioGroupItem } from '@nerdfish/react/radio-group'
export default function RadioGroupWithDescriptionExample() {
return (
<div>
<RadioGroup name="radio-demo" defaultValue="comfortable">
<div className="flex items-start space-x-2">
<RadioGroupItem value="default" id="with-description-1" />
<Label
className="gap-bff flex flex-col items-start justify-start text-left"
htmlFor="with-description-1"
>
Default
<p className="text-foreground-muted/70 w-full text-sm">
This is a description for the Radio Group. It could be a very long
description that can contain <strong>html</strong> elements.
</p>
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="comfortable" id="with-description-2" />
<Label htmlFor="with-description-2">Comfortable</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="compact" id="with-description-3" />
<Label htmlFor="with-description-3">Compact</Label>
</div>
</RadioGroup>
</div>
)
}