Browser default checkboxes and radios are replaced with the help of <CFormCheck>. Checkboxes are for selecting one or several options in a list.
Default checkbox
Checked checkbox
Indeterminate#Checkboxes can utilize the :indeterminate pseudo-class when manually set via indeterminate property.
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.
Disabled checkbox
Disabled checked checkbox
Default (stacked)#By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
Default checkbox
Disabled checkbox
Inline#Group checkboxes on the same horizontal row by adding inline boolean property to any <CFormCheck>.
Put your checkboxes on the opposite side by adding reverse boolean property.
Reverse checkbox
Disabled reverse checkbox
Without labels#Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).
Create button-like checkboxes and radio buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can further be grouped in a button group if needed.
Single toggleCheckedDisabled
Outlined styles#Different variants of button, such at the various outlined styles, are supported.
Single toggleCheckedChecked success
API#Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4