UIKit
7.11.0
• SwitchКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
Switch
Maintainer:
zamkovskaya
size
content
checked
disabled
import {Switch} from '@gravity-ui/uikit';
The Switch
component is used to toggle between two states: typically, between on and off, or enabled and disabled.
§States
A Switch
can have different states:
- Checked: When the switch has the On state.
- Disabled: When the switch is unavailable.
<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
.
<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.
<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 |
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 | 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> |