Switch | Zalify UI

Label

React

Usage

import { Switch } from '@zalify-ui/react'

<Switch.Root>
  <Switch.HiddenInput />
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label />
</Switch.Root>

Shortcuts

The Switch component also provides a set of shortcuts for common use cases.

SwitchControl

The Switch.Control renders the Switch.Thumb within it by default.

This works:

<Switch.Control>
  <Switch.Thumb />
</Switch.Control>

This might be more concise, if you don't need to customize the thumb:

<Switch.Control />

Examples

Sizes

Use the size prop to change the size of the switch.

React

Controlled

Use the checked and onCheckedChange prop to control the state of the switch.

Label

React

Disabled

Use the disabled prop to disable the switch.

Label

React

Invalid

Use the invalid prop to mark the switch as invalid.

Label

React

Wrap the Switch.Root with a Tooltip to show a tooltip on hover or focus.

Switch with tooltip

React

Track Indicator

Use the Switch.Indicator component to display different indicators based on the checked state.

Label

React

Thumb Indicator

Use the Switch.ThumbIndicator component to add an icon to the switch thumb.

Label

React

Closed Component

Here's how to setup the switch for a closed component composition.

import { forwardRef, type InputHTMLAttributes, type ReactNode, type RefObject } from 'react'
import { Switch as ParkSwitch } from '@zalify-ui/react'

export interface SwitchProps extends ParkSwitch.RootProps {
  inputProps?: InputHTMLAttributes<HTMLInputElement>
  rootRef?: RefObject<HTMLLabelElement | null>
  trackLabel?: { on: ReactNode; off: ReactNode }
  thumbLabel?: { on: ReactNode; off: ReactNode }
}

export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(props, ref) {
  const { inputProps, children, rootRef = null, trackLabel, thumbLabel, ...rest } = props

  return (
    <ParkSwitch.Root ref={rootRef} {...rest}>
      <ParkSwitch.HiddenInput ref={ref} {...inputProps} />
      <ParkSwitch.Control>
        <ParkSwitch.Thumb>
          {thumbLabel && (
            <ParkSwitch.ThumbIndicator fallback={thumbLabel?.off}>
              {thumbLabel?.on}
            </ParkSwitch.ThumbIndicator>
          )}
        </ParkSwitch.Thumb>
        {trackLabel && (
          <ParkSwitch.Indicator fallback={trackLabel.off}>{trackLabel.on}</ParkSwitch.Indicator>
        )}
      </ParkSwitch.Control>
      {children != null && <ParkSwitch.Label>{children}</ParkSwitch.Label>}
    </ParkSwitch.Root>
  )
})

Props

Root

Prop	Default	Type
`variant`	`'solid'`	`'solid'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'`
`value`	`\on\`	`string \| number` The value of switch input. Useful for form submission.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`		`boolean` The controlled checked state of the switch
`disabled`		`boolean` Whether the switch is disabled.
`ids`		`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string }>` The ids of the elements in the switch. Useful for composition.
`invalid`		`boolean` If `true`, the switch is marked as invalid.
`label`		`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`		`string` The name of the input field in a switch (Useful for form submission).
`onCheckedChange`		`(details: CheckedChangeDetails) => void` Function to call when the switch is clicked.
`readOnly`		`boolean` Whether the switch is read-only
`required`		`boolean` If `true`, the switch input is marked as required,