Top
CheckBox - Styling & Theming
CheckBox
To style and customize the appearance of <CheckBox />, you can use one of the following strategies:
  • Specify a style prop with the desired values
  • Specify a <Checkbox /> className - note that this will not override the default class of zippy-react-toolkit-checkbox, but rather will be appended to the classes that the component already has.
Below you can find a list with all the CSS classes applied to <CheckBox /> and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-checkbox
This is the block className for all checkboxes. Always applied.
zippy-react-toolkit-checkbox--inline-block
Applied when inlineBlock=true - this is the default value.
zippy-react-toolkit-checkbox--rtl
Applied when rtl=true.
zippy-react-toolkit-checkbox--children-position-[CHILDREN_POSITION]
Applied with the value of the childrenPosition default value being "end".
zippy-react-toolkit-checkbox--focused
Applied when the <Checkbox /> is focused.