Gravity UI – UIKit

import {Switch} from '@gravity-ui/uikit';

Компонент Switch (переключатель) используется для переключения между двумя состояниями: как правило, между On и Off или Enabled и Disabled.

Состояния

Switch может иметь разные состояния:

Checked — когда переключатель включен.
Disabled — когда переключатель недоступен.

UncheckedCheckedDisabled

import {Switch} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Switch size="l" checked={false}>
                Unchecked
            </Switch>
            <Switch size="l" checked>
                Checked
            </Switch>
            <Switch size="l" disabled>
                Disabled
            </Switch>
        </>
    );
}

import {Switch} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Switch size="l" checked={false}>
                Unchecked
            </Switch>
            <Switch size="l" checked>
                Checked
            </Switch>
            <Switch size="l" disabled>
                Disabled
            </Switch>
        </>
    );
}

Размер

Размер Switch можно настроить с помощью свойства size. Размер по умолчанию — m.

S SizeM SizeL Size

import {Switch} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Switch size="s">S Size</Switch>
            <Switch size="m">M Size</Switch>
            <Switch size="l">L Size</Switch>
        </>
    );
}

import {Switch} from '@gravity-ui/uikit';

export default function () {
    return (
        <>
            <Switch size="s">S Size</Switch>
            <Switch size="m">M Size</Switch>
            <Switch size="l">L Size</Switch>
        </>
    );
}

Лейбл

Лейбл для Switch можно задать через свойство content или передать его как дочерний элемент.

Content

Content as children

import {Box, Switch} from '@gravity-ui/uikit';


export default function () {
    return (
        <div>
            <Switch content="Content" size="l" />
            <Box spacing={{mt: 2}}>
                <Switch size="l">
                    <span>Content as children</span>
                </Switch>
            </Box>
        </div>
    );
}

import {Box, Switch} from '@gravity-ui/uikit';

export default function () {
    return (
        <div>
            <Switch content="Content" size="l" />
            <Box spacing={{mt: 2}}>
                <Switch size="l">
                    <span>Content as children</span>
                </Switch>
            </Box>
        </div>
    );
}

Свойства

Имя	Описание	Тип	Значение по умолчанию
children	Содержимое переключателя (как правило, лейбл).	`ReactNode`
content	Содержимое переключателя (альтернатива `children`).	`ReactNode`
disabled	Включает или отключает состояние `disabled` у переключателя.	`boolean`	`false`
loading	Включает или отключает состояние загрузки у переключателя.	`boolean`	`false`
checked	Включает или отключает состояние `checked` у переключателя.	`boolean`	`false`
defaultChecked	Задает начальное состояние `checked` при монтировании компонента.	`boolean`	`false`
onUpdate	Срабатывает при изменении состояния переключателя пользователем и передает значение `checked` как аргумент обратного вызова.	`(checked: boolean) => void`
onChange	Срабатывает при изменении состояния переключателя пользователем и передает событие изменения как аргумент обратного вызова.	`Function`
onFocus	Обработчик события, вызываемый, когда элемент ввода переключателя получает фокус.	`Function`
onBlur	Обработчик события, вызываемый, когда элемент ввода переключателя теряет фокус.	`Function`
size	Определяет размер переключателя.	`s` `m` `l`	`m`
id	HTML-атрибут `id`.	`string`
qa	HTML-атрибут `data-qa`, используется для тестирования.	`string`
style	HTML-атрибут `style`.	`React.CSSProperties`
className	HTML-атрибут `class`.	`string`
title	HTML-атрибут `title`.	`string`
name	HTML-атрибут `name` для элемента ввода.	`string`
value	HTML-атрибут `value` для элемента ввода.	`string`
indeterminate	Включает или отключает состояние неопределенности переключателя.	`boolean`	`false`
controlProps	Дополнительные свойства базового элемента ввода.	`React.InputHTMLAttributes<HTMLInputElement>`
controlRef	Ссылка на базовый элемент ввода.	`React.Ref<HTMLInputElement>`

Switch

§Состояния

§Размер

§Лейбл

§Свойства

Состояния

Размер

Лейбл

Свойства