Switch

An on or off setting that takes effect right away. Use a Checkbox when the change waits for a Save button.

Basic

Set defaultChecked to start a switch on, and give each switch an aria-label or visible text that names the setting.

Sizes

Set size="small" for a smaller switch in dense rows and table cells, next to the default size.

Shapes

Set shape to square, squircle or default to change the corners of the track, and the knob follows them.

Status colors

Set color to success, warning or error to paint the on track, its hover and its focus ring in that status color.

Preset colors

Set color to any color name in your theme, like blue, volcano or emerald, to paint the on track in that hue.

Text and icon

Pass checkedChildren and unCheckedChildren to show short text or an icon inside the track for each state.

Disabled

Set disabled to lock a switch in its current state, with a button beside it that turns the lock on and off.

Loading

Set loading to show a spinner on the knob and block clicks while a change saves, here in every shape and both sizes.

In form: horizontal

Put a Switch in a Form.Item with valuePropName="checked" so the form reads and sets its state, with the label beside it.

In form: vertical

Set the Form's layout to vertical to put the label above the switch, still bound with valuePropName="checked".

In context

The component inside real screens, with the components it usually sits beside.

With description

A setting row wrapped in a <label>, with a title and a description, so clicking the text toggles the switch.

Switch group

Three related settings stacked as label rows, each with a title, a description and its own switch.

Feature flags

A card of feature flags where each switch shows loading while its change saves, then settles in the new state.

Dangerous setting

A red switch behind a Popconfirm, controlled so it only turns on after the user confirms the deletion.

Feature card grid

A grid of feature cards where each whole card is a <label>, so a click anywhere on it toggles its switch.

Permissions matrix

A compact table of permissions with a small switch in every cell, one row per action and one column per role.

API Reference

Switch
Switch's props. Rows marked antuikit in the Version column are added by the kit.