Import
import { RadioButton } from '@adoptaunabuelo/react-components';
Usage
<RadioButton
selected={isSelected}
onClick={() => setIsSelected(!isSelected)}
>
Option label
</RadioButton>
Props
Whether the radio button is selected
Whether the radio button is disabled (displays with gray styling)
onClick
(event: React.MouseEvent<HTMLDivElement>) => void
Callback fired when the radio button is clicked
Label text or content to display next to the radio button
Custom styles for the container
Unique identifier for the radio button
Features
- Animated selection with smooth transitions (0.1s linear)
- Circular radio indicator with inner filled circle when selected
- Disabled state with gray styling
- Automatically manages internal selected state
- Clickable label text
- 24px margin spacing for vertical layouts
Examples
<RadioButton
selected={selectedOption === 'option1'}
onClick={() => setSelectedOption('option1')}
>
Option 1
</RadioButton>
const [selected, setSelected] = useState('a');
<div>
<RadioButton
selected={selected === 'a'}
onClick={() => setSelected('a')}
>
Option A
</RadioButton>
<RadioButton
selected={selected === 'b'}
onClick={() => setSelected('b')}
>
Option B
</RadioButton>
<RadioButton
selected={selected === 'c'}
onClick={() => setSelected('c')}
>
Option C
</RadioButton>
</div>
<RadioButton disabled selected={false}>
Disabled option
</RadioButton>
