Live example
Properties
|
Name |
Values |
Default |
|---|---|---|
|
id (required) |
String |
|
|
label (required) |
ReactNode |
|
|
className |
string | boolean |
true |
|
checked (native) |
boolean |
|
|
invalid (native) |
boolean |
|
|
activeOpacity (native) |
number |
0.8 |
Native Properties
|
Name |
Values |
Default |
|---|---|---|
|
label (required) |
ReactNode |
|
|
checked |
boolean |
false |
|
invalid |
boolean |
false |
|
activeOpacity |
number |
0.8 |
|
testID |
string |
|
|
… |
Omit<TouchableOpacityProps, 'children'> |
|
Composition
- Optional icon
- Text
- Radio icon
- Card background
|
Tokens |
|
|---|---|
|
Icon colour |
color.brand.brand |
|
Text colour |
color.surface.onsurface |
|
Radio border colour - Idle, selected |
input.color.border input.color.selected |
|
Selected colour |
input.color.selected |
|
Radio background color - Selected |
input.color.selectedtint |
|
Card background colour |
color.surface.bright |
|
Text font weight |
font.family.bold |
|
Text font size |
font.size.md |
|
Text line height |
font.lineheight.md |
|
Card border radius |
border.radius.lg |
|
Border width - Selected |
border.width.md |