Checkbox
Checkboxes allow the user to select one or more items from a set.
setup
Import the Checkbox component in a script tag.
Svelte Copy
import { Checkbox } from "@mgisolutions/design-system/svelte";
basic usage
Basic usage Button
Demonstrate
Svelte Copy
<Checkbox label="seclect value" checked={false} />
demo
Custom checkbox
Demonstrate
Types
Sizes
Svelte Copy
<Checkbox id="id" name="name" type="check" size="small" checked="{false}" label="Select All" disabled={false} />
Component Data
- props
- slots
- events
| Name | Description | Type | Default |
|---|---|---|---|
| id | To set the id of a checkbox. | string | |
| name | To set the name of a checkbox. | string | |
| label | To set the label of a checkbox. | string | |
| className | This can be use for applying extra classes to the <input type=checkbox /> tag. | string | |
| labelClassName | This can be use for applying extra classes to the label of a checkbox. | string | |
| checked | To set the default value of a checkbox. | boolean | true |
| disabled | To set checkbox enable or disabled. | boolean | false |
| type | To set checkbox sign as ☑ or [-] | string (check | line) | check |
| size | To set checkbox size small(16x16) or large(20x20) | string (small | large) | check |