Checkbox
Allows user to select one or more items from several options.
version
5.13.0
install
yarn add @welcome-ui/checkbox
usage
import { Checkbox } from '@welcome-ui/checkbox'
Usage #
With Label #
Use Field component to add a label
With hint #
Use Field component to add a hint
Variants #
Use hint
, warning
, error
, info
or success
properties on Field component to add a variant status on your checkbox. The label, hint or border color are set by magic 🪄
Nested checkboxes #
Use 'indeterminate' prop to manage the behaviour of a parent checkbox in response to children checkboxes. This can help you create a nested selection menu.
Example #
A FieldGroup form with React Hook Form
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
checked | Boolean | false | |
Component | React.ElementType<any> | S.Checkbox | |
disabled | Boolean | ||
indeterminate | Boolean | false | |
name | string | ||
onChange | (event: ChangeEvent<HTMLInputElement>) => void | ||
size | "xs" "sm" "md" "lg" | ||
variant | "error" "focused" "info" "success" "warning" | ||
transparent | Boolean | ||
isClearable | Boolean | ||
hasIcon | Boolean | ||
iconPlacement | "right" "left" "both" |
Packages #
Dependencies #
Peer dependencies #
Previous
ButtonGroupNext
DatePicker