41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
# Checkbox
|
|
|
|
Custom checkbox input
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import Checkbox from "@appserver/components/checkbox";
|
|
```
|
|
|
|
```jsx
|
|
<Checkbox
|
|
id="id"
|
|
name="name"
|
|
value="value"
|
|
label="label"
|
|
isChecked={false}
|
|
isIndeterminate={false}
|
|
isDisabled={false}
|
|
onChange={() => {}}
|
|
/>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
| ----------------- | :------------: | :------: | :----: | :-----: | ----------------------------------------------------------- |
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
| `id` | `string` | - | - | - | Used as HTML `id` property |
|
|
| `isChecked` | `bool` | - | - | `false` | The checked property sets the checked state of a checkbox |
|
|
| `isDisabled` | `bool` | - | - | - | Disables the Checkbox input |
|
|
| `isIndeterminate` | `bool` | - | - | - | If true, this state is shown as a rectangle in the checkbox |
|
|
| `label` | `string` | - | - | - | Label of the input |
|
|
| `name` | `string` | - | - | - | Used as HTML `name` property |
|
|
| `onChange` | `func` | ✅ | - | - | Will be triggered whenever an CheckboxInput is clicked |
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
|
| `value` | `string` | - | - | - | Value of the input |
|
|
| `title` | `bool` | - | - | - | Title |
|
|
| `truncate` | `bool` | - | - | `false` | Disables word wrapping |
|
|
| `color` | `string` | - | - | `#FFFF` | Makes the checkbox a different color |
|