Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Switch

Switch is a component used to toggle between on and off states.

Source@yamada-ui/switch

Props

SwitchIconProps

isActive

Type

boolean

isChecked

Type

boolean

isFocused

Type

boolean

isHovered

Type

boolean

SwitchProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Default

"primary"

defaultIsChecked

Description

If true, the checkbox will be initially checked.

Type

boolean

Default

false

icon

Description

The switch icon to use.

Type

ReactElement<SwitchIconProps, string | JSXElementConstructor<any>>

id

Description

id assigned to input.

Type

string

inputProps

Description

Props for switch input element.

Type

InputHTMLAttributes<HTMLInputElement>

isChecked

Description

If true, the checkbox will be checked.

Type

boolean

Default

false

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

isReverse

Description

Change switch label from right to left.

Type

boolean

Default

false

labelProps

Description

Props for switch label element.

Type

HTMLUIProps<"span">

name

Description

The HTML name attribute used for forms.

Type

string

onBlur

Description

The callback invoked when the checkbox is blurred.

Type

FocusEventHandler<HTMLInputElement>

onChange

Description

The callback invoked when the checked state changes.

Type

ChangeEventHandler<HTMLInputElement>

onFocus

Description

The callback invoked when the checkbox is focused.

Type

FocusEventHandler<HTMLInputElement>

selectOnEnter

Description

If true, the checkbox will be selected when the Enter key is pressed.

Type

boolean

Default

false

size

Description

The size of the Switch.

Type

"sm" | "md" | "lg"

Default

"md"

tabIndex

Description

The tab-index property of the underlying input element.

Type

number

transition

Description

Motion transition settings.

Type

Transition$1

value

Description

The value to be used in the checkbox input.

Type

string

variant

Description

The variant of the Switch.

Type

"thin" | "thick"

Default

"thick"

Edit this page on GitHub

PreviousCheckboxCardNextToggle