kopia lustrzana https://github.com/shoelace-style/shoelace
1.4 KiB
1.4 KiB
Checkbox
[component-header:sl-checkbox]
Checkboxes allow the user to toggle an option on or off.
<sl-checkbox>Checkbox</sl-checkbox>
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
?> This component works with standard <form>
elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples
Checked
Use the checked
attribute to activate the checkbox.
<sl-checkbox checked>Checked</sl-checkbox>
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
Indeterminate
Use the indeterminate
attribute to make the checkbox indeterminate.
<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
Disabled
Use the disabled
attribute to disable the checkbox.
<sl-checkbox disabled>Disabled</sl-checkbox>
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
[component-metadata:sl-checkbox]