Skip to main content

​
Base Radio Checkbox

BaseRadioCheckbox is a low-level component that provides the foundational building blocks for creating Radio and Checkbox components. It includes reusable parts for control styling, labels, and help text.
This is primarily an internal component used by Radio and Checkbox. In most cases, you should use the Checkbox or Radio components instead.

​
Installation

yarn add @twilio-paste/core
Or if you need just this component: 
yarn add @twilio-paste/base-radio-checkbox

​
Component Parts

BaseRadioCheckbox consists of four sub-components:

​
BaseRadioCheckboxControl

The visual control box that displays the checked/unchecked state. 
import { BaseRadioCheckboxControl } from '@twilio-paste/core/base-radio-checkbox';
import { CheckIcon } from '@twilio-paste/icons/esm/CheckIcon';

<BaseRadioCheckboxControl disabled={false}>
  <CheckIcon decorative size="sizeIcon20" />
</BaseRadioCheckboxControl>

​
BaseRadioCheckboxLabel

The label wrapper that connects the label text to the input. 
import { BaseRadioCheckboxLabel } from '@twilio-paste/core/base-radio-checkbox';

<BaseRadioCheckboxLabel htmlFor="input-id">
  Label content
</BaseRadioCheckboxLabel>

​
BaseRadioCheckboxLabelText

The text content within the label. 
import { BaseRadioCheckboxLabelText } from '@twilio-paste/core/base-radio-checkbox';

<BaseRadioCheckboxLabelText>
  Label text
</BaseRadioCheckboxLabelText>

​
BaseRadioCheckboxHelpText

Help text displayed below the control. 
import { BaseRadioCheckboxHelpText } from '@twilio-paste/core/base-radio-checkbox';

<BaseRadioCheckboxHelpText helpTextId="help-text-id">
  Additional information about this option
</BaseRadioCheckboxHelpText>

​
Props

​
BaseRadioCheckboxControl

​
children
ReactNode
required
The icon or content to display inside the control box (e.g., check mark icon).
​
disabled
boolean
Whether the control is disabled.
​
applyHoverStyles
boolean
default:"false"
Only used in Visual Picker to apply hover styles.
​
element
string
default:"BASE_RADIO_CHECKBOX_CONTROL"
Overrides the default element name for customization.

​
BaseRadioCheckboxLabel

​
children
ReactNode
required
The label content.
​
htmlFor
string
The ID of the associated input element.
Extends all standard Label component props.

​
BaseRadioCheckboxLabelText

​
children
ReactNode
required
The text content of the label.
​
element
string
default:"BASE_RADIO_CHECKBOX_LABEL_TEXT"
Overrides the default element name for customization.

​
BaseRadioCheckboxHelpText

​
children
ReactNode
required
The help text content.
​
helpTextId
string
required
Unique identifier for the help text element, used for aria-describedby.
​
element
string
default:"BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER"
Overrides the default element name for customization.

​
States

The BaseRadioCheckboxControl supports multiple interactive states:
  • Default: Normal, unchecked state
  • Hover: Mouse hover state
  • Focus: Keyboard focus state
  • Active: Mouse down state
  • Checked: Selected state
  • Disabled: Non-interactive state
  • Invalid: Error state
  • Checked + Hover: Checked with mouse hover
  • Checked + Focus: Checked with keyboard focus
  • Checked + Disabled: Checked but disabled
  • Invalid + Disabled: Invalid but disabled

​
Best Practices

​
Do

  • Use this component as a building block for custom radio or checkbox-like controls
  • Maintain consistent spacing and sizing with the base implementation
  • Follow the established pattern for state management
  • Connect labels properly using htmlFor and input IDs

​
Don’t

  • Don’t use this for standard checkboxes or radios - use the Checkbox or Radio components
  • Don’t modify core interaction states without good reason
  • Don’t create controls that don’t follow radio/checkbox semantics
  • Don’t skip accessibility attributes when building on top of this component

​
Accessibility

  • Always associate labels with inputs using htmlFor
  • Use helpTextId to connect help text via aria-describedby
  • Ensure all interactive states have appropriate visual indicators
  • Maintain sufficient color contrast in all states
  • Support keyboard navigation (focus states)

​
Related Components

Build docs developers (and LLMs) love

Get started for freeTalk to us