Buttons
Radio
Storybook
Radio
The Radio Button component is a type of button that allows the user to select a single option from a set of predefined options.
Import
To import the Radio Button component, use the following syntax:
1import { Radio } from 'dd360-ds'1import Radio from 'dd360-ds/Radio'Usage
The prop value is mandatory and is used to indicate the value of the selected option
1import { Radio } from 'dd360-ds'
2
3<Radio value='one' />Label
To add a label to the radio button, you can use the prop label:
1import { Radio } from 'dd360-ds'
2
3<Radio value='one' label='Click here' />Checked
To display the selected state of the radio button, the checked prop can be used:
1import { Radio } from 'dd360-ds'
2
3<Radio value='one' checked label='Click here' />Disabled
To disable the radio button, the disabled prop can be used:
1import { Radio } from 'dd360-ds'
2
3<Radio value='one' disabled label='Click here' />Error
To display a radio button with error status, the prop error can be used:
1import { Radio } from 'dd360-ds'
2
3<Radio value='one' error label='Click here' checked />Colors
The Radio Button component comes with predefined colors. By default, it uses the primary variant, but the following colors can also be used: success, danger and primary:
1import { Radio, RadioGroup } from 'dd360-ds'
2<RadioGroup name='radio-buttons-group' title='Radio Group' row >
3 <Radio value='one' label='Click here' color='primary' checked />
4 <Radio value='two' label='Click here' color='success' checked />
5 <Radio value='three' label='Click here' color='danger' checked />
6</RadioGroup>InputProps
The inputProps property allows passing additional InputHTMLAttributes to the Radio component:
1import { Radio } from 'dd360-ds'
2<Radio value='one' inputProps={{ 'aria-label': 'one'}} label='Click here' />API Reference
| Name | Types | Default |
|---|---|---|
| "value"* | string | - |
| "label" | string | - |
| "name" | string | - |
| "color" | primary success danger | primary |
| "disabled" | boolean | false |
| "checked" | boolean | false |
| "error" | boolean | false |
| "className" | string | - |
| "onChange" | ((event: ChangeEvent<HTMLInputElement>) => void) | - |
| "inputProps" | InputHTMLAttributes | - |
| "style" | CSSProperties | - |