ColorModeSwitch

A switch to toggle between light and dark mode.

The ColorModeSwitch component extends the Switch component, so you can pass any property such as color, size, etc.

{
  "wait": "Loading client-side content..."
}

API

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`loading`	`false`	`boolean` When `true`, the loading icon will be displayed
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg"`
`color`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot"`
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean` When `true`, prevents the user from interacting with the switch.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`label`		`string`
`defaultValue`		`boolean` The state of the switch when it is initially rendered. Use when you do not need to control its state.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`id`		`string`
`value`		`string` The value given as data when submitted with a `name`.
`description`		`string`
`loadingIcon`	`icons.refresh`	`IconComponent` The icon when the `loading` prop is `true`.
`b24ui`		`{ root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }`

ColorModeSelect

A Select to switch between system, dark & light mode.

LocaleSelect

A Select to switch between locales.