Radio Button
A radio button component with label support. The label can be placed at the Start, End, Top, or Bottom position with full RTL support.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { RadioLabel, Button } from 'sdaia-ui';5
Installation
npx sdaia-ui@latest add radiobutton
Usage
import { RadioButton } from "@/components/ui/radio-button"<RadioButton placement="start" />Examples
Size
Use the `size` prop to change the size of the radio button.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { RadioButton } from 'sdaia-ui';5
Default
The default Primary style uses the brand colour when selected.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { RadioButton } from 'sdaia-ui';5
Primary
The default Primary style uses the brand colour when selected.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { RadioButton } from 'sdaia-ui';5
Neutral
Use `style="Neutral"` for a grey selected state in secondary contexts.
Loading preview…
1
'use client';2
3
import { useState } from 'react';4
import { RadioButton } from 'sdaia-ui';5
Disabled
Use `state="Disabled"` to prevent user interaction.
Loading preview…
1
'use client';2
3
import { RadioButton } from 'sdaia-ui';4
5
export default function RadioButtonDisabled() {API Reference
Radio Button Props
Props for the Radio Button component.
Prop | Type | Default | Required |
|---|---|---|---|
label | ReactNode | — | optional |
size | 'sm' | 'md' | 'lg' | — | optional |
variant | 'primary' | 'neutral' | — | optional |
error | string | — | optional |
helperText | string | — | optional |