Components
Boxes for checking and unchecking single values in forms.
Version: | 14.18.2 •View source•Changelog•Report issue | |
---|---|---|
Install: | yarn add @thumbtack/thumbprint-react | |
Import: | import { Radio } from '@thumbtack/thumbprint-react'; |
The isChecked
prop determines when this controlled component is checked.
This an example of how to use many Radio
components at once.
Here are a few points to note:
Radio
receives an id
. This id
is then passed as the second argument to onChange
.selectedId
variable from React.useState()
.isChecked
performs a comparison to see if the id
matches the value of selectedId
.The isDisabled
prop visually and functionally disabled the radio button. It also visually disables the related label.
The hasError
prop can be used to visually represent an error.
This prop only changes the radio button’s color. It should be used alongside an error message that helps users advance through the form.
It’s possible to provide complex UIs to the children
prop. Clicking on the content will select the related radio button.
This example puts the label content within children
. It’s also possible to not provide children
as undefined
and use a custom label
instead. In that case, you must use Radio
’s id
prop.
Radio input by default is vertically center-aligned with children
. If children
prop spans over multiple lines and you want it to align at the top, it is possible to provide radioVerticalAlign
prop as top
.
name
Radio buttons that have the same name attribute are in the same radio button group. Only one radio in a group can be selected at a time. All of the radio buttons in the group must share a value that is unique to the page. This is required for keyboard navigation.
string
onChange
Function that runs when a new radio button is selected. It receives the new boolean value,
the provided id
, and the underlying event
as such:
props.onChange(event.target.checked, props.id, event)
.
(
isChecked: boolean,
id: string | undefined,
event: React.ChangeEvent<HTMLInputElement>,
) => void
isDisabled
Disable the input and the label.
boolean
false
children
Text or elements that appear within the label. If children
is not provided, the developer
must use the Radio
’s id
prop to associate it with a custom <label>
element.
React.ReactNode
null
id
The id
is added to the radio button as an HTML attribute and passed to the onChange
function.
string
isChecked
Boolean that determines if the radio is checked.
boolean
false
isRequired
Adds the required
HTML attribute.
boolean
false
hasError
Makes the radio and text color red.
boolean
false
labelPadding
Determine that padding that gets applied to the label. This can be used
to increase the label’s click target. The value supplied should be a
string with a unit such as 8px
or 8px 16px
.
string
'14px 0'
onKeyDown
Function that is called when the user presses a key while focused on the Radio.
(event: React.KeyboardEvent<HTMLInputElement>) => void
(): void => {}
dataTestId
A selector hook into the React component for use in automated testing environments. It is
applied internally to the <input />
element.
string
dataTest
A selector hook into the React component for use in automated testing environments. It is
applied internally to the <input />
element.
Note: Deprecated in favor of the `dataTestId` prop
string
radioVerticalAlign
Determines how the radio button input will be vertically aligned relative to props.children
.
This prop can be one of the following 2 types:
'top'
'center'
'center'
value
Determines the value that will be submitted if the radio is selected. The default value is
'on'
.
This prop can be one of the following 3 types:
string
string[]
number