1.4 KiB

Czysty Wina Historia

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]

1.4 KiB Czysty Wina Historia