Create consistent cross-browser and cross-device radios with our React radio component.
Browser default radios are replaced with the help of <CFormCheck radio>
. Radios are for selecting one option from many.
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.
1<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>2<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
1<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>2<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced.
1<CFormCheck type="radio" name="exampleRadios" id="exampleRadios1" value="option1" label="Default radio" defaultChecked/>2<CFormCheck type="radio" name="exampleRadios" id="exampleRadios2" value="option2" label="Second default radio"/>3<CFormCheck type="radio" name="exampleRadios" id="exampleRadios3" value="option3" label="Disabled radio" disabled/>
Group radios on the same horizontal row by adding inline
boolean property to any <CFormCheck radio>
.
1<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>2<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>3<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label
).
1<CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..."/>
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.
1<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>2<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>3<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>4<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
Different variants of button, such at the various outlined styles, are supported.
1<CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>2<CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
1import { CFormCheck } from '@coreui/react'2// or3import 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 by adding. | boolean | - |
invalid | Set component validation state to invalid. | boolean | - |
label | The element represents a caption for a component. | ReactNode | - |
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 | - |