Logo

AueraUI

Docs

Components

Components

Switch

A toggle control for switching between two states.

Logo
Enable Notifications

Sizes

Use the size prop to change the size of the switch

sm
md
lg
xl

Color

Use the color and unCheckColor prop to change the color of the switch

Variant

Use the variant prop to change the switch visual style

State

Use the onToggleSwitch prop to get the switch state

OFF

Controlled

With the on prop you can set the switch default state

ON

Disabled

Allow Tracking

API Reference

size

Type:

"sm" | "md" | "lg" | "xl"

Defines the size of the switch.

Default:

md
variant

Type:

"padded" | "flush"

Defines the visual style of the switch.

Default:

padded
on

Type:

boolean

Controls the switch default state.

Default:

false
onToggleSwitch

Type:

function

Callback function that gets triggered when the switch state changes. Receives the new state as an argument.

Default:

unCheckColor

Type:

ColorPair

Specifies the color of the switch when it is turned off.

Default:

gray-300
color

Type:

ColorPair

Defines the color of the switch when it is turned on.

Default:

blue-500
disabled

Type:

boolean

Disables interaction with the switch when set to true.

Default:

false
className

Type:

string

Allows custom styling by applying additional CSS classes.

Default: