Thumbprint logo

Components

Radio

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';

Basic radio button

The isChecked prop determines when this controlled component is checked.

Multiple radio buttons
This an example of how to use many Radio components at once.
Here are a few points to note:
  • Each Radio receives an id. This id is then passed as the second argument to onChange.
  • The selected radio button is stored in the selectedId variable from React.useState().
  • isChecked performs a comparison to see if the id matches the value of selectedId.
Disabled radio buttons
The isDisabled prop visually and functionally disabled the radio button. It also visually disables the related label.
Radio button with an error
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.
Multi-column content
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.
Props
Radio
  • name
    required
    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.
    Type
    string
  • onChange
    required
    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).
    Type
    (
    isChecked: boolean,
    id: string | undefined,
    event: React.ChangeEvent<HTMLInputElement>,
) => void
  • isDisabled
    Disable the input and the label.
    Type
    boolean
    Default
    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.
    Type
    React.ReactNode
    Default
    null
  • id
    The id is added to the radio button as an HTML attribute and passed to the onChange
function.
    Type
    string
  • isChecked
    Boolean that determines if the radio is checked.
    Type
    boolean
    Default
    false
  • isRequired
    Adds the required HTML attribute.
    Type
    boolean
    Default
    false
  • hasError
    Makes the radio and text color red.
    Type
    boolean
    Default
    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.
    Type
    string
    Default
    '14px 0'
  • onKeyDown
    Function that is called when the user presses a key while focused on the Radio.
    Type
    (event: React.KeyboardEvent<HTMLInputElement>) => void
    Default
    (): void => {}
  • dataTestId
    A selector hook into the React component for use in automated testing environments. It is
applied internally to the <input /> element.
    Type
    string
  • dataTest
    deprecated
    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
    Type
    string
  • radioVerticalAlign
    Determines how the radio button input will be vertically aligned relative to props.children.
    Type
    This prop can be one of the following 2 types:
    • 'top'
    • 'center'
    Default
    'center'
  • value
    Determines the value that will be submitted if the radio is selected. The default value is
'on'.
    Type
    This prop can be one of the following 3 types:
    • string
    • string[]
    • number