Usage
Label position
Size
Color
Controlled
Change icon
Change icon color
Disabled state
Pointer cursor
By default, radio input and label have cursor: default
(same as native input[type="radio"]
).
To change cursor to pointer, set cursorType
on theme:
Radio with tooltip
You can change target element to which tooltip is attached with refProp
:
- If
refProp
is not set, the tooltip is attached to the checkbox input - If
refProp="rootRef"
is set, the tooltip is attached to the root element (contains label, input and other elements)
Add props to the root element
All props passed to the component are forwarded to the input element. If you need to add props to the root element, use wrapperProps
. In the following example:
data-testid="wrapper"
is added to the root elementdata-testid="input"
is added to the input element
Radio.Group component
Select your favorite framework/library
This is anonymous
Controlled Radio.Group
Get element ref
Styles API
Radio
supports Styles API, you can add styles to any inner element of the component withclassNames
prop. Follow Styles API documentation to learn more.
Radio description
Radio error
Component Styles API
Hover over selectors to highlight corresponding elements
Accessibility
Set aria-label
or label
prop to make the radio accessible: