The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants.
Setup # Checkbox examples #Use this default example of a checbkox element in a checked, unchecked and indeterminate state.
Disabled state #This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element.
Alternative syntax #If you need separate control over the label and the checkbox you can use the verbose syntax, but then you need to take care about aligning manually.
Checkbox with a link #Use this example if you want to add an anchor link inside the label of the checkbox component.
Helper text #Get started with this example if you want to add a secondary helper text for the checkbox component.
Bordered #Use this example of a checkbox inside a card element to enable a larger area of clicking activation.
Checkbox list group #Use this example to show a list of checkbox items grouped inside a card.
You can use the internal loop to render a list of CheckboxItems.
Use this example to show a list of checkbox items inside a card horizontally.
Checkbox dropdown #Use this example to show a list of checkbox items inside a dropdown menu.
Inline layout #You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class.
You can use the property inline as the alternative.
Red
Green
Purple
Teal
Yellow
Orange
Your custom color CheckboxButton #The special case component - CheckboxButton - is the Checkbox with the Button look and feel. It can be used as standalone element or be wrapped inside ButtonGroup.
This component accepts all props from the Button for styling and Checkbox for behaviour.
Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.
Group variable # Component data #The component has the following props, type, and default values. See types page for type information.
References #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