Switch

Stable

Boolean toggle input with size and variant customisation.

Installation

npm install @xaui/native

Import

import { Switch } from '@xaui/native/switch'

Basic Usage

Minimal example showing the component with its default configuration.

import { Switch } from '@xaui/native/switch'

export function Example() {
  return <Switch />
}

Basic Switch

A labeled toggle switch.

import { Switch } from '@xaui/native/switch'

export function BasicExample() {
  return <Switch label="Enable notifications" />
}

Controlled Switch

Manage on/off state with React.

import { useState } from 'react'
import { Switch } from '@xaui/native/switch'

export function ControlledExample() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch
      label="Dark mode"
      isSelected={enabled}
      onValueChange={setEnabled}
    />
  )
}

Sizes

Adjust the toggle size.

import { Switch } from '@xaui/native/switch'
import { Column } from '@xaui/native/view'

export function SizesExample() {
  return (
    <Column gap={8}>
      <Switch label="Small" size="sm" />
      <Switch label="Medium" size="md" />
      <Switch label="Large" size="lg" />
    </Column>
  )
}

Variants

Compare inside and overlap visual variants.

import { Switch } from '@xaui/native/switch'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={10}>
      <Switch label="Inside variant" variant="inside" defaultSelected />
      <Switch label="Overlap variant" variant="overlap" defaultSelected />
    </Column>
  )
}

Theme Colors

Apply semantic colors to communicate context.

import { Switch } from '@xaui/native/switch'
import { Column } from '@xaui/native/view'

export function ThemeColorsExample() {
  return (
    <Column gap={10}>
      <Switch label="Primary" themeColor="primary" defaultSelected />
      <Switch label="Success" themeColor="success" defaultSelected />
      <Switch label="Warning" themeColor="warning" defaultSelected />
      <Switch label="Danger" themeColor="danger" defaultSelected />
    </Column>
  )
}

Label Alignment and Full Width

Change label position and stretch rows when needed.

import { Switch } from '@xaui/native/switch'
import { Column } from '@xaui/native/view'

export function AlignmentExample() {
  return (
    <Column gap={10}>
      <Switch label="Right label (default)" labelAlignment="right" />
      <Switch label="Left label" labelAlignment="left" />
      <Switch label="Justify right" labelAlignment="justify-right" fullWidth />
      <Switch label="Justify left" labelAlignment="justify-left" fullWidth />
    </Column>
  )
}

Radius and Disabled State

Control shape and disable interaction.

import { Switch } from '@xaui/native/switch'
import { Column } from '@xaui/native/view'

export function RadiusDisabledExample() {
  return (
    <Column gap={10}>
      <Switch label="Square" radius="sm" defaultSelected />
      <Switch label="Rounded" radius="full" defaultSelected />
      <Switch label="Disabled off" isDisabled />
      <Switch label="Disabled on" isDisabled defaultSelected />
    </Column>
  )
}

Custom Label Style and Container Style

Apply style overrides for text and row container.

import { Switch } from '@xaui/native/switch'

export function StyledSwitchExample() {
  return (
    <Switch
      label="Styled switch"
      defaultSelected
      labelStyle={{ fontWeight: '700', letterSpacing: 0.3 }}
      style={{ paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#e2e8f0' }}
    />
  )
}