The radio and radio group are used for selecting a single option from a list. If you need to have an unselected state, just add a radio button with a None option.
| Component Name | Development Status |
|---|---|
| Radio | DONE |
| Radio Group | DONE |
You can find all examples for components developed in this module here.
Very basic Radio component examples.
| Property Name | Type | Description |
|---|---|---|
| id | string | The id attribute of the radio. |
| name | string | The name attribute of the radio. |
| label | node | Label of the radio. |
| value | string | The value attribute of the radio. |
| onChange - () => {} | func | Function called when state changes Signature: ``` function(event: object, checked: boolean) => void ``` |
| disabled | bool | When true, the radio is disabled. |
| checked | bool | When true, the radio is checked. |
| isRequired | boolrequired | When true, the radio get the required attribute. |
Controller RadioGroup component examples.
This component composes styled-system
| Property Name | Type | Description |
|---|---|---|
| options - [] | arrayOf | The options for the radios of the Radio Group. |
| value | string | The selected item value when controlled. |
| defaultValue | string | The default value of the Radio Group when uncontrolled. |
| onChange - () => {} | func | Function called when state changes. |
| isRequired - false | bool | When true, the radio get the required attribute. |