silk-widgets/com.varabyte.kobweb.silk.components.forms/Switch

Switch

@Composable
fun Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, variant: CssStyleVariant<SwitchKind>? = null, enabled: Boolean = true, size: SwitchSize = SwitchSize.MD, shape: SwitchShape = SwitchShape.PILL, colorPalette: ColorPalette? = null, thumbColor: CSSColorValue? = null, focusBorderColor: CSSColorValue? = null, ref: ElementRefScope<HTMLElement>? = null)(source)

Creates a toggleable switch.

Note that visual control of the switch is fairly limited compared to many other widgets -- you can't directly modify the width or height of the track or the thumb parts. Instead, configure your switch by passing in the relevant parameters.

Note that this widget is backed by a checkbox input. Use the ref callback if you need access to it:

ref = ref { element -> element.getElementsByTagName("input")[0] as HTMLInputElement }
Content copied to clipboard

Parameters

checked

Whether the switch is currently checked or not.

onCheckedChange

A callback which is invoked when the switch is toggled.

modifier

The modifier to apply to the container of this switch element. This will not be applied to the switch itself (since its configuration comes from the other parameters).

enabled

Whether the switch is enabled or not. If not, the switch will be rendered in a disabled state and will not be interactable.

size

The size of the switch. Defaults to SwitchSize.MD. You can implement your own SwitchSize if you want custom sizing.

colorPalette

A color palette which, if present, controls the colors for this switch. If not provided, the switch will use the relevant colors from the silk theming Palette.

thumbColor

An optional override for the color of the thumb.

focusBorderColor

An optional override for the border color when the input is focused.

ref

Provides a reference to the container of the switch. Its direct children will be the underlying checkbox element and the switch track, whose direct child will be the thumb element.

@Composable
fun Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, variant: CssStyleVariant<SwitchKind>? = null, enabled: Boolean = true, size: SwitchSize = SwitchSize.MD, shape: SwitchShape = SwitchShape.PILL, colorScheme: ColorScheme, thumbColor: CSSColorValue? = null, focusBorderColor: CSSColorValue? = null, ref: ElementRefScope<HTMLElement>? = null)(source)

Deprecated

Rename the `colorScheme` parameter to `colorPalette`. `ColorScheme` is a legacy name that is going away.