Radio
Radio component.
import { Radio } from '@redshank/native';
When To Use
- Used to select a single state from multiple options.
- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.
Examples
Default
Default radio element.
Orientation
Orientation elements.
Types
Types radio.
Sizes
Size radio.
Error variant
With manual controller error.
Customize element.
Personalize colors to radio elements.
APIs
Radio Props
Api props extends from TouchableOpacity
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| activeColor | ThemeColor | ThemeColor | Active color of the element | inputColor |
| inactiveColor | ThemeColor | ThemeColor | Inactive color of the element | inputColor |
| label | string | Text | Required text to show in option | - |
| onPress | function | (value: NumberStringValue) => void | onPress function trigger | - |
| size | SizeType | small middle large | Size of the radio | middle |
| type | RadioType | circle square | Circle or square variant | circle |
| value | NumberStringValue | NumberStringValue | Value of the controller input | - |
Radio Group Props
Api props extends from View
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| activeColor | ThemeColor | ThemeColor | Active color of the element | inputColor |
| align | AlignType | horizontal vertical | Orientation type | horizontal |
| inactiveColor | ThemeColor | ThemeColor | Inactive color of the element | inputColor |
| defaultValue | NumberStringValue | NumberStringValue | Default Value for element | - |
| error | boolean | true false | Show error variant | - |
| onChange | function | (value: NumberStringValue) => void | On change function trigger | - |
| textError | string | Text String | Message of the error, set with error prop in true | - |
| value | NumberStringValue | NumberStringValue | Value of the controller input | - |
| size | SizeType | small middle large | Size of the radio | middle |
| type | RadioType | circle square | Circle or square variant | circle |
NumberStringValue
type NumberStringValue = 'string' | 'number'
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.