Switch 开关

用于在两种状态之间切换。

基础用法

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

function Demo() {
  return <Switch />
}

受控与非受控

import { useState } from 'react'
import { Switch } from '@airo-ui/react'

function ControlledDemo() {
  const [checked, setChecked] = useState(false)
  return <Switch checked={checked} onChange={setChecked} />
}

function UncontrolledDemo() {
  return <Switch defaultChecked />
}

加载状态

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

function Demo() {
  return <Switch loading />
}

尺寸

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

function Demo() {
  return (
    <>
      <Switch size="sm" />
      <Switch size="md" />
    </>
  )
}

禁用

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

function Demo() {
  return (
    <>
      <Switch disabled />
      <Switch disabled defaultChecked />
    </>
  )
}

API

Props

名称	类型	默认值	说明
checked	boolean	—	受控模式开关状态
defaultChecked	boolean	false	非受控模式默认开关状态
disabled	boolean	false	是否禁用
loading	boolean	false	加载状态
size	'sm' | 'md'	'md'	尺寸
onChange	(checked: boolean) => void	—	开关状态变化时触发