Toggle

Newv0.3.0

オン/オフの状態を持つトグルボタン。ツールバーやオプション選択に使用します。

基本的な使い方

クリックで押された状態を切り替え

tsx

class="token keyword">import { Toggle } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

class="token keyword">const pressed = class="token function">useSignal(class="token keyword">false);

<class="token tag">Toggle
  pressed={pressed.value}
  onPressedChange$={(v) => pressed.value = v}
>
  <class="token tag">span class="token keyword">class=class="token keyword">class="token string">"font-bold">B</class="token tag">span>
</class="token tag">Toggle>

バリアント

異なるスタイルのトグル

Default

Outline

サイズ

3つのサイズバリエーション

テキストフォーマットツールバー

複数のトグルを組み合わせた例

選択中: なし

ToggleGroup

排他的な選択を行うトグルグループ

テキスト配置:

選択: left

表示モード:

tsx

<class="token tag">ToggleGroup
  value={alignment.value}
  onValueChange$={(v) => alignment.value = v}
>
  <class="token tag">ToggleGroupItem value=class="token keyword">class="token string">"left">Left</class="token tag">ToggleGroupItem>
  <class="token tag">ToggleGroupItem value=class="token keyword">class="token string">"center">Center</class="token tag">ToggleGroupItem>
  <class="token tag">ToggleGroupItem value=class="token keyword">class="token string">"right">Right</class="token tag">ToggleGroupItem>
</class="token tag">ToggleGroup>

Props API

Prop	Type	Default	Description
`pressed`	`boolean`	`false`	押された状態
`disabled`	`boolean`	`false`	無効状態
`variant`	`"default" \| "outline"`	`"default"`	スタイルバリアント
`size`	`"sm" \| "md" \| "lg"`	`"md"`	サイズ
`onPressedChange$`	`(pressed: boolean) => void`	-	状態変更時のコールバック

Accessibility

aria-pressed 属性で状態を伝達
キーボード（Enter/Space）で操作可能
ToggleGroup は aria-role='group' を使用
フォーカス時に明確なアウトラインを表示