STYLE
GRID
ATOMS
MOLECULES
- Badges
-
Form
- Input
- Dropdown
- Radio buttons
Checkboxes
- Switches
- Data tables
- Alerts
- Progress bar
- Quantity widget
- Title header
- Search bar
- Search flyout
- Banners
- Product image
- Collapsible
- Coupon info
- Menu item
- Pictures menu
- Infospace
- Product rating
- Brushed text
- Product list item
- Product list empty
- Pills
ORGANISMS
- Header
- Footer
- Pagination
- Product widget
- Product recommendations
- Product tech data
- Product info
- Product comparison
- Product relations
- Product buy box
- Product gallery
- Product usp
- Product history
- Menu
- Mobile header
- Category tree
- Featured product
- Eye catcher
- Product list
- Newsletter signup
- Main navigation
- Campaign card
- Full picture block
- Product highlight
- Voucher-code
- Header slider
- Primary campaign
- Campaign slider
- Featured categories
TEMPLATES
PAGES
DEVELOPER
Checkboxes
Checkboxes
unrefactoredThis component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.
Fluid:
Responsive:
Description:
- ● Select options from a list.
- ● Number of options selected can be anything from all to nothing.
- ● Checkboxes are independent from each other.
Usage
- ● Used when a user can choose any number of options from the list.
- ● Used to show the user all available options at one glance.
Guidelines
- ● Labels for checkboxes should be clearly meaningful.
- ● Labels have to describe the exact action that will happen if checkbox is selected.
- ● Labels are displayed on the right side next to the checkbox.
- ● Checkboxes can be activated by clicking on the label or the box.