2020-07-15 21:30:37 +00:00
# Checkbox
[component-header:sl-checkbox]
Checkboxes allow the user to toggle an option on or off.
```html preview
< sl-checkbox > Checkbox< / sl-checkbox >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
2022-03-02 15:10:41 +00:00
const App = () => < SlCheckbox > Checkbox< / SlCheckbox > ;
2021-11-04 22:12:47 +00:00
```
2022-01-11 14:18:20 +00:00
?> This component works with standard `<form>` elements. Please refer to the section on [form controls ](/getting-started/form-controls ) to learn more about form submission and client-side validation.
2020-07-15 21:30:37 +00:00
## Examples
### Checked
Use the `checked` attribute to activate the checkbox.
```html preview
< sl-checkbox checked > Checked< / sl-checkbox >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
2022-03-02 15:10:41 +00:00
const App = () => < SlCheckbox checked > Checked< / SlCheckbox > ;
2021-11-04 22:12:47 +00:00
```
2020-07-15 21:30:37 +00:00
### Indeterminate
Use the `indeterminate` attribute to make the checkbox indeterminate.
```html preview
< sl-checkbox indeterminate > Indeterminate< / sl-checkbox >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
2022-03-02 15:10:41 +00:00
const App = () => < SlCheckbox indeterminate > Indeterminate< / SlCheckbox > ;
2021-11-04 22:12:47 +00:00
```
2020-07-15 21:30:37 +00:00
### Disabled
Use the `disabled` attribute to disable the checkbox.
```html preview
< sl-checkbox disabled > Disabled< / sl-checkbox >
```
2021-11-04 22:12:47 +00:00
```jsx react
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
2022-03-02 15:10:41 +00:00
const App = () => < SlCheckbox disabled > Disabled< / SlCheckbox > ;
2021-11-04 22:12:47 +00:00
```
2020-07-15 21:30:37 +00:00
[component-metadata:sl-checkbox]