概要

スイッチ

チェックボックスの代替となるトグルスイッチ。

ソースコードを表示問題を報告 Playgroundで表示

<Switch defaultChecked />

APIリファレンス

このコンポーネントは、Switch primitive から props を継承し、共通のマージン props をサポートします。

Prop	型	デフォルト
`size`	`レスポンシブ<"1" \| "2" \| "3">`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"surface"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし

例

サイズ

スイッチのサイズを制御するには、size prop を使用します。

<Flex align="center" gap="2">
  <Switch size="1" defaultChecked />
  <Switch size="2" defaultChecked />
  <Switch size="3" defaultChecked />
</Flex>

バリアント

スイッチの視覚スタイルを制御するには、variant prop を使用します。

<Flex gap="2">
  <Flex direction="column" gap="3">
    <Switch variant="surface" />
    <Switch variant="classic" />
    <Switch variant="soft" />
  </Flex>

  <Flex direction="column" gap="3">
    <Switch variant="surface" defaultChecked />
    <Switch variant="classic" defaultChecked />
    <Switch variant="soft" defaultChecked />
  </Flex>
</Flex>

色

特定の色を割り当てるには、color prop を使用します。

<Flex gap="2">
  <Switch color="indigo" defaultChecked />
  <Switch color="cyan" defaultChecked />
  <Switch color="orange" defaultChecked />
  <Switch color="crimson" defaultChecked />
</Flex>

ハイコントラスト

ライトモードで色のコントラストを上げるには、highContrast prop を使用します。

<Grid rows="2" gapX="2" gapY="3" display="inline-grid" flow="column">
  <Switch color="indigo" defaultChecked />
  <Switch color="indigo" defaultChecked highContrast />
  <Switch color="cyan" defaultChecked />
  <Switch color="cyan" defaultChecked highContrast />
  <Switch color="orange" defaultChecked />
  <Switch color="orange" defaultChecked highContrast />
  <Switch color="crimson" defaultChecked />
  <Switch color="crimson" defaultChecked highContrast />
  <Switch color="gray" defaultChecked />
  <Switch color="gray" defaultChecked highContrast />
</Grid>

半径

特定の半径値を割り当てるには、radius prop を使用します。

<Flex gap="3">
  <Switch radius="none" defaultChecked />
  <Switch radius="small" defaultChecked />
  <Switch radius="full" defaultChecked />
</Flex>

配置

Switch を Text 内に構成すると、自動的にテキストの最初の行と中央揃えになります。

設定の同期

<Flex direction="column" gap="3">
  <Text as="label" size="2">
    <Flex gap="2">
      <Switch size="1" defaultChecked /> Sync settings
    </Flex>
  </Text>

  <Text as="label" size="3">
    <Flex gap="2">
      <Switch size="2" defaultChecked /> Sync settings
    </Flex>
  </Text>

  <Text as="label" size="4">
    <Flex gap="2">
      <Switch size="3" defaultChecked /> Sync settings
    </Flex>
  </Text>
</Flex>

複数行のテキストとも自動的に適切に整列します。

無効化

無効なスイッチを作成するには、ネイティブの disabled 属性を使用します。

オフ

オン

オフ

<Flex direction="column" gap="2">
  <Text as="label" size="2">
    <Flex gap="2">
      <Switch size="1" />
      Off
    </Flex>
  </Text>

  <Text as="label" size="2">
    <Flex gap="2">
      <Switch size="1" defaultChecked />
      On
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex gap="2">
      <Switch size="1" disabled />
      On
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex gap="2">
      <Switch size="1" disabled defaultChecked />
      Off
    </Flex>
  </Text>
</Flex>

前へSpinner

次へTable

GitHub でこのページを編集します。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

スイッチ