Are you ready for Cyber Monday Week Deals?
Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.
React Radio Components
Radio
Create consistent cross-browser and cross-device radios with our React radio component.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
On this page
Approach#
Browser default radios are replaced with the help of <CFormCheck radio>. Radios are for selecting one option from many.
Radios#
Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input's state.
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/><CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>Disabled#
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/><CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>Default (stacked)#
By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.
<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/><CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/><CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>Inline#
Group radios on the same horizontal row by adding inline boolean property to any <CFormCheck radio>.
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/><CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/><CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>Reverse#
Put your radios on the opposite side by adding reverse boolean property.
<CFormCheck reverse type="radio" id="reverseOption1" value="option1" label="Reverse radio"/><CFormCheck reverse type="radio" id="reverseOption2" value="option2" label="Disabled reverse radio" disabled/>Without labels#
Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).
<CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>Radio toggle buttons#
Create button-like radio buttons by using button boolean property on the <CFormCheck radio> component. These toggle buttons can further be grouped in a button group if needed.
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/><CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/><CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/><CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>Outlined styles#
Different variants of button, such at the various outlined styles, are supported.
<CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/><CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>Customizing#
SASS variables#
$form-check-input-width: 1em !default;$form-check-min-height: $font-size-base * $line-height-base !default;$form-check-padding-start: $form-check-input-width + .5em !default;$form-check-margin-bottom: .125rem !default;$form-check-label-color: null !default;$form-check-label-cursor: null !default;$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;$form-check-input-border: var(--cui-border-width) solid var(--cui-border-color) !default;$form-check-input-border-radius: .25em !default;$form-check-radio-border-radius: 50% !default;$form-check-input-focus-border: $input-focus-border-color !default;$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;$form-check-input-checked-bg-color: $component-active-bg !default;$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
$form-check-input-indeterminate-color: $component-active-color !default;$form-check-input-indeterminate-bg-color: $component-active-bg !default;$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
$form-check-input-disabled-opacity: .5 !default;$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;API#
CFormCheck#
import { CFormCheck } from '@coreui/react'// orimport CFormCheck from '@coreui/react/src/components/form/CFormCheck'| Property | Description | Type | Default |
|---|---|---|---|
| button | Create button-like checkboxes and radio buttons. | ButtonObject | - |
| className | A string of all className you want applied to the component. | string | - |
| feedback 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackInvalid 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackValid 4.2.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | ReactNode | - |
| floatingLabel 4.2.0+ | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | ReactNode | - |
| hitArea | Sets hit area to the full area of the component. | 'full' | - |
| id | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - |
| indeterminate | Input Checkbox indeterminate Property. | boolean | - |
| inline | Group checkboxes or radios on the same horizontal row. | boolean | - |
| invalid | Set component validation state to invalid. | boolean | - |
| label | The element represents a caption for a component. | ReactNode | - |
| reverse | Put checkboxes or radios on the opposite side. | boolean | - |
| tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
| type | Specifies the type of component. | 'checkbox' | 'radio' | checkbox |
| valid | Set component validation state to valid. | boolean | - |