Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Toggle

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

ソース@yamada-ui/toggle

Toggleにアイコンのみを使用する場合は、Togglearia-labelを設定します。

<Toggle icon={<Bold />} aria-label="Toggle bold" />
Copied!

ToggleGrouparia-labelを設定すると、スクリーンリーダーによって読み上げられます。これにより、グループの目的や機能をユーザーに伝えることができます。

const [value, setValue] = useState<string | undefined>(undefined)
return (
<ToggleGroup
value={value}
onChange={setValue}
aria-label="Text formatting options"
>
<Toggle value="bold" icon={<Bold />} aria-label="Toggle bold" />
<Toggle value="italic" icon={<Italic />} aria-label="Toggle italic" />
<Toggle
value="underline"
icon={<Underline />}
aria-label="Toggle underline"
/>
</ToggleGroup>
)
Copied!

キーボード操作

キー説明状態
Tab要素をフォーカスします。-
Space, Enterフォーカスされた要素を切り替えます。-

ARIAロールと属性

コンポーネントロールと属性使い方
ToggleGrouprole="group"グループであることを示します。
Togglearia-pressed要素が押されているの場合はtrueを設定し、押されていないの場合はfalseを設定します。

GitHubでこのページを編集する

SwitchSelect