TriStateCheckbox
TriStateCheckbox is used to select either "true", "false" or "null" as the value.
Import via Module
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
Import via CDN
<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/tristatecheckbox/tristatecheckbox.min.js"></script>
Getting Started
TriStateCheckbox is used as a controlled input with checked and onChange properties.
<TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
Properties
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | null | Unique identifier of the element. |
| value | any | null | Value of the TriStateCheckbox. |
| style | string | null | Inline style of the element. |
| className | string | null | Style class of the element. |
| disabled | boolean | false | When present, it specifies that the element value cannot be altered. |
| readOnly | boolean | false | When present, it specifies that the value cannot be changed. |
| tabIndex | number | null | Index of the element in tabbing order. |
| tooltip | any | null | Content of the tooltip. |
| tooltipOptions | object | null | Configuration of the tooltip, refer to the tooltip documentation for more information. |
Events
| Name | Parameters | Description |
|---|---|---|
| onChange | event.originalEvent: Browser event event.value: Current Value | Callback to invoke on value change |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-chkbox | Container element |
| p-tristatechkbox | Container element |
| p-chkbox-box | Container of icon. |
| p-chkbox-icon | Icon element. |
Accessibility
This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.
Dependencies
None.
Component Scale
Input Style
Ripple Effect
Free Themes
Built-in component themes created by the PrimeReact Theme Designer.
Bootstrap
Material Design
Material Design Compact
Tailwind
Fluent UI
PrimeOne Design - 2022 NEW
PrimeOne Design - 2021
Premium Themes
Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.
Legacy Free Themes
Premium Create-React-App Templates
Beautifully crafted premium create-react-app application templates by the PrimeTek design team.
