Radio properties
| Property | Type | Description |
|---|---|---|
value | string | (required) defines the value as a string. Use it to get the value during the on_change event listener callback in the RadioGroup. |
checked | boolean | (optional) determine whether the radio is checked or not. Default will be false. |
group | string | (optional) use a unique group identifier to define the Radio buttons that belongs together. |
size | medium large | (optional) the size of the Radio button. For now there is medium (default) and large. |
label | React.ReactNode | (optional) use either the label property or provide a custom one. |
label_position | left right | (optional) defines the position of the label. Use either left or right. Defaults to right. |
label_sr_only | boolean | (optional) use true to make the label only readable by screen readers. |
status | error info boolean | (optional) text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message. |
status_state | error info | (optional) defines the state of the status. It's two statuses [error, info]. Defaults to error. |
status_props | Various | (optional) use an object to define additional FormStatus properties. |
globalStatus | Various | (optional) the configuration used for the target GlobalStatus. |
innerRef | React.RefObject | (optional) by providing a React.ref we can get the internally used input element (DOM). E.g. innerRef={myRef} by using React.createRef() or React.useRef(). |
Radio.Group properties
| Property | Type | Description |
|---|---|---|
value | string | (optional) defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value. |
name | string | (optional) custom grouping name. Defaults to a random name. |
layout_direction | column row | (optional) Define the layout direction of the Radio buttons. Can be either column or row. Defaults to column. |
size | medium large | (optional) the size of the Radio button. For now there is medium (default) and large. |
status | string boolean | (optional) uses the form-status component to show failure messages. |
status_state | error info | (optional) defines the state of the status. It's two statuses [error, info]. Defaults to error. |
status_props | Various | (optional) use an object to define additional FormStatus properties. |
globalStatus | Various | (optional) the configuration used for the target GlobalStatus. |
label | React.ReactNode | (optional) use either the label property or provide a custom one. |
label_direction | vertical horizontal | (optional) to define the label layout direction on how the next element should be placed on. Can be either vertical or horizontal. Defaults to horizontal. |
label_sr_only | boolean | (optional) use true to make the label only readable by screen readers. |
vertical | boolean | (optional) will force both direction and label_direction to be vertical if set to true. |
Radio group Context
You can also pass through label_position and some more Radio button properties to the Group. This way all nested Radio buttons will get the properties.