フォーカスリング

Yamada UIは、要素がフォーカスされたときに様々なスタイルを適用する機能を提供しています。

概要

フォーカスリングは、フォーカスされている要素を識別するために使用されます。Yamada UIでは、フォーカスリングのスタイルを簡単に設定するためのfocusRingとfocusVisibleRingを提供しています。

使い方

focusRing

focusRingは&:is(:focus, [data-focus])に適用されます。

<Button variant="outline" focusRing="outside" data-focus>
  Button
</Button>

focusVisibleRing

focusVisibleRingは&:is(:focus-visible, [data-focus-visible])に適用されます。

<Button variant="outline" focusVisibleRing="outside" data-focus-visible>
  Button
</Button>

Yamada UIでは、グローバルスタイルでfocusVisibleRing="outline"がすべての要素にデフォルトで設定されています。そのため、個別に設定を行わなくても、すべての要素でfocusVisibleRingが設定されます。

カスタマイズ

バリアントを変更する

<Wrap gap="md">
  <For each={["outline", "inline", "mixed", "outside", "inside", "none"]}>
    {(value, index) => (
      <Button key={index} variant="outline" focusRing={value} data-focus>
        {toTitleCase(value)}
      </Button>
    )}
  </For>
</Wrap>

色を変更する

色を変更する場合は、focusRingColorに値を設定します。

<Button
  variant="outline"
  focusRing="outline"
  focusRingColor="success"
  data-focus
>
  Button
</Button>

太さを変更する

太さを変更する場合は、focusRingWidthに値を設定します。

<Button variant="outline" focusRing="outline" focusRingWidth="1px" data-focus>
  Button
</Button>

スタイルを変更する

スタイルを変更する場合は、focusRingStyleに値を設定します。

<Button
  variant="outline"
  focusRing="outline"
  focusRingStyle="dashed"
  data-focus
>
  Button
</Button>

オフセットを変更する

オフセットを変更する場合は、focusRingOffsetに値を設定します。

<Button variant="outline" focusRing="outline" focusRingOffset="5px" data-focus>
  Button
</Button>