Switch

Switchは、オンとオフの状態を切り替えるために使用されるコンポーネントです。

Basic

<Switch>Basic</Switch>

使い方

import { Switch } from "@yamada-ui/react"

import { Switch } from "@/components/ui"

import { Switch } from "@workspaces/ui"

<Switch />

バリアントを変更する

Thick

Thin

<HStack>
  <For each={["thick", "thin"]}>
    {(variant) => (
      <Switch key={variant} variant={variant}>
        {toTitleCase(variant)}
      </Switch>
    )}
  </For>
</HStack>

サイズを変更する

Size (sm)

Size (md)

Size (lg)

<HStack>
  <For each={["sm", "md", "lg"]}>
    {(size) => (
      <Switch key={size} size={size}>
        Size ({size})
      </Switch>
    )}
  </For>
</HStack>

カラースキームを変更する

Success

Warning

<HStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Switch key={colorScheme} colorScheme={colorScheme} defaultChecked>
        {toTitleCase(colorScheme)}
      </Switch>
    )}
  </For>
</HStack>

ラベルの位置を変更する

Reverse Label

<Switch reverse>Reverse Label</Switch>

形を変更する

Square

Rounded

Circle

<VStack>
  <For each={["square", "rounded", "circle"]}>
    {(shape) => (
      <Switch key={shape} shape={shape} defaultChecked>
        {toTitleCase(shape)}
      </Switch>
    )}
  </For>
</VStack>

無効にする

Disabled

<HStack>
  <Switch disabled>Disabled</Switch>
  <Switch disabled defaultChecked>
    Disabled
  </Switch>
</HStack>

読み取り専用にする

Read Only

<HStack>
  <Switch readOnly>Read Only</Switch>
  <Switch readOnly defaultChecked>
    Read Only
  </Switch>
</HStack>

アイコンをカスタマイズする

Dark Mode

<Switch
  size="lg"
  icon={{ off: <MoonIcon fontSize="sm" />, on: <SunIcon fontSize="sm" /> }}
>
  Dark Mode
</Switch>

ラベルをカスタマイズする

Please Click

const id = useId()

return (
  <HStack gap="sm">
    <Text as="label" htmlFor={id} userSelect="none">
      Please Click
    </Text>
    <Switch id={id} />
  </HStack>
)

制御する

Custom Control

const [checked, { toggle }] = useBoolean(false)

return (
  <Switch checked={checked} onChange={toggle}>
    Custom Control
  </Switch>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"thick"`	`"thick" \| "thin"` The variant of the component.
`checked`	`false`	`boolean` If `true`, the switch will be checked.
`checkOnEnter`	`true`	`boolean` If `true`, the switch will be checked when the Enter key is pressed.
`defaultChecked`	`false`	`boolean` If `true`, the switch will be initially checked.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`icon`	-	`ReactNode \| { off: ReactNode; on: ReactNode }` The switch icon to use.
`id`	-	`string` id assigned to input.
`inputProps`	-	`HTMLStyledProps<"input">` Props for switch input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`labelProps`	-	`HTMLStyledProps<"span">` Props for switch label element.
`name`	-	`string` The HTML `name` attribute used for forms.
`onBlur`	-	`FocusEventHandler<HTMLInputElement>` The callback invoked when the switch is blurred.
`onChange`	-	`ChangeEventHandler<HTMLInputElement>` The callback invoked when the checked state changes.
`onFocus`	-	`FocusEventHandler<HTMLInputElement>` The callback invoked when the switch is focused.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`tabIndex`	-	`number` The tab-index property of the underlying input element.
`value`	-	`Y` The value to be used in the switch input.

アクセシビリティ

Switchは、アクセシビリティに関してWAI-ARIA - Switch Patternに従います。

キー	説明	状態
`Tab`	無効ではないスイッチをフォーカスします。	-
`Space`	フォーカスされたスイッチの状態を切り替えます。	-
`Enter`	`checkOnEnter`が`true`の場合、フォーカスされたスイッチの状態を切り替えます。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Switch`	`role="switch"`	スイッチであることを示します。
	`aria-checked`	スイッチがオンの場合は`"true"`を設定し、オフの場合は`"false"`を設定します。
	`aria-describedby`	`Switch`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。

類似のコンポーネント

SegmentedControlは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

Radioは、ユーザーが複数の選択肢の中から1つの値を選択するために使用されるコンポーネントです。

Ratingは、ユーザーが評価を行うために使用させるコンポーネントです。

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

Checkboxは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。

RadioCardは、ユーザーが複数の選択肢の中から1つを選択するために使用されるコンポーネントです。

CheckboxCardは、ユーザーが複数の選択肢の中から複数の値を選択するために使用されるコンポーネントです。

使用しているコンポーネント・フック

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。