@gravity-ui/uikit
Version:
Gravity UI base styling and components
76 lines (61 loc) • 5.25 kB
Markdown
# Switch
The `Switch` component is used to toggle between two states: typically, between **on** and **off**, or **enabled** and **disabled**.
```tsx
import {Switch} from '@gravity-ui/uikit';
```
## States
A `Switch` can have different states:
- Checked: When the switch has the **On** state.
- Disabled: When the switch is unavailable.
```tsx
<Switch size="l" checked={false}>Unchecked</Switch>
<Switch size="l" checked>Checked</Switch>
<Switch size="l" disabled>Disabled</Switch>
```
## Size
Use the `size` property to manage the `Switch` size. The default size is `m`.
```tsx
<Switch size="s">S Size</Switch>
<Switch size="m">M Size</Switch>
<Switch size="l">L Size</Switch>
```
## Label
You can assign a label to a `Switch` using the `content` property or provide it as a child property.
```tsx
<div>
<Switch content="Content" size="l" />
<div
style={{
marginTop: 10,
}}
>
<Switch size="l">
<span>Content as children</span>
</Switch>
</div>
</div>
```
## Properties
| Name | Description | Type | Default |
| :------------- | :------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-----: |
| children | The content of the switch (usually, a label) | `ReactNode` | |
| content | The content of the switch (alternative to children) | `ReactNode` | |
| disabled | Toggles the `disabled` state of the switch | `boolean` | `false` |
| loading | Toggles the `loading` state of the switch | `boolean` | `false` |
| checked | Toggles the `checked` state of the switch | `boolean` | `false` |
| defaultChecked | Sets the initial checked state when the component is mounted | `boolean` | `false` |
| onUpdate | Fires when the switch state is changed by the user and provides the checked value as a callback argument | `(checked: boolean) => void` | |
| onChange | Fires when the switch state is changed by the user and provides the change event as a callback argument | `Function` | |
| onFocus | Event handler to use when the switch input element receives focus | `Function` | |
| onBlur | Event handler to use when the switch input element loses focus | `Function` | |
| size | Sets the size of the switch | `s` `m` `l` | `m` |
| id | `id` HTML attribute | `string` | |
| qa | `data-qa` HTML attribute, used for testing | `string` | |
| style | `style` HTML attribute | `React.CSSProperties` | |
| className | `class` HTML attribute | `string` | |
| title | `title` HTML attribute | `string` | |
| name | `name` HTML attribute for the input element | `string` | |
| value | `value` HTML attribute for the input element | `string` | |
| indeterminate | Toggles the indeterminate state of the switch | `boolean` | `false` |
| controlProps | Additional propeties for the underlying input element | `React.InputHTMLAttributes<HTMLInputElement>` | |
| controlRef | Ref to the underlying input element | `React.Ref<HTMLInputElement>` | |