CheckBox - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <CheckBox />, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/CheckBox and @zippytech/react-toolkit/CheckBox/index.css.
Use onChange(checked) to be notified of <CheckBox /> value changes.
This is the most basic setup for a <CheckBox />. In the following sections we will explore how to use it in various scenarios, using indeterminate value, theming, custom icons and others.
You can either specify a controlledchecked prop or use the uncontrolled defaultChecked to specify the <CheckBox /> value.
The <CheckBox /> supports the indeterminate state and more advanced features - like specifying a different value for each of its states. For details, see Custom checked values.
You can also use the browser native checkbox input, by specifying browserNative.
If set to true, will render a simple <input type="checkbox" /> instead of the default svg icons.
When using browserNative, some props of the <CheckBox /> are no longer supported: notably those referring to the icons rendered for each state.
Just like any other component in the toolkit, the <CheckBox /> supports the theme prop, which by default has the value of "default", meaning that the default theme is applied.
In order for the default theme to be applied you have to import @zippytech/react-toolkit/CheckBox/index.css into your app:
import '@zippytech/react-toolkit/CheckBox/index.css'
This file contains both the structural styles that are needed for the checkbox, as well as the default theme.
In case you only want to load the structural styles for the checkbox, you can import @zippytech/react-toolkit/CheckBox/base.css instead:
import '@zippytech/react-toolkit/CheckBox/base.css'
Be aware, though, that in this case you have to style the checkbox appearance for yourself.
However, you can import both the structural styles and the default theme separately:
import '@zippytech/react-toolkit/CheckBox/base.css'
import '@zippytech/react-toolkit/CheckBox/theme/default.css'
You can read more about theming any toolkit component in the theming overview.
To read more about specifically theming that can be applied to <CheckBox />, go ahead to the section on CheckBox styling and theming.