Options

Molecule

A single selectable row used inside a dropdown or as a select-style trigger. Three slots (leading icon · label · trailing) and three states (default · hover · disabled), in three sizes (lg 48px / md 40px / sm 32px). Composes with the Tag component for trailing chips.

When to use

✅ Do

Use as individual selectable rows inside a Dropdown panel
Use the trailing slot for Tag chips to show metadata alongside the label
Use <button role="option"> for interactive rows in a listbox context
Keep all items in a list the same size for visual consistency

❌ Don't

Use as a standalone element without a Dropdown or list wrapper
Use more than 10 items without a search or filter mechanism
Use as navigation between pages — use Tabs or Links instead
Mix sizes within the same dropdown list

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

An Options row has three slots — leading icon, label, and trailing — around a base interactive element.

Label

1Base — .options. The row element. Use <button role="option"> for interactive use.
2Leading slot — .options-leading. Optional icon (16px for md/sm, 24px for lg).
3Label — .options-label. The primary text. Always required.
4Trailing slot — .options-trailing. Optional chevron, icon, or Tag chip.

Default

The canonical Options row, mirroring the Figma library (node 3420-2878): leading icon, label, trailing chevron, and a .tag.tag-grey.tag-outline chip in the trailing slot. Default size is md (40px). Use <button role="option"> for interactivity.

HTML

<button type="button" class="options">
  <span class="options-leading"><svg>…</svg></span>
  <span class="options-label">Options</span>
  <span class="options-trailing">
    <svg>…</svg>
    <span class="tag tag-grey tag-outline tag-sm">Label</span>
  </span>
</button>

Variants

Mix and match content in the leading and trailing slots. The leading slot accepts any inline element — an SVG icon, the .opt-dot radio indicator for "current selection," or nothing. The trailing slot is the right rail for a chevron, a checkmark, a Tag chip, a shortcut hint, or any combination thereof (when combining, they sit side-by-side with an 8px gap).

Sizes

Three sizes per Figma symbols: .options-lg (48px), default md (40px), .options-sm (32px). The leading + trailing icons scale with the row — 24 / 16 / 16 px (Large bumps up, Medium and Small share the smaller icon). Typography also steps down per size: Body 1 (16/24) for Large, Body 2 (14/24) for Medium, Caption 1 (12/16) for Small. Horizontal padding is --spacing-sm (12px) at every size.

HTML

<button class="options options-lg">…</button>   /* 48px */
<button class="options">…</button>             /* 40px (default) */
<button class="options options-sm">…</button>   /* 32px */

States

Default · Hover · Disabled. Hover and focus are real CSS-driven states — pointer over the row or keyboard-focus it to preview. Disabled uses either the HTML disabled attribute (when the row is a <button>) or the .is-disabled class for non-interactive elements. .is-hover forces the hover visual at rest for documentation. Hover bg is a 5% black overlay (Figma Product/Trans-Bg), so it composes correctly over any surface.

Full matrix

3 sizes × 3 states = 9 cells, mirroring the Figma reference (node 3420-2878) 1:1. Each cell shows the canonical pattern: leading add-square icon · "Options" label · trailing chevron + .tag.tag-grey.tag-outline chip.

Default

Hover

Disabled

Large · 48px

Medium · 40px

Small · 32px

Accessibility

Options rows use native <button> elements with an appropriate role depending on context.

Attribute / Behaviour	Value	Notes
Role — selection list	`role="option"`	Use inside a `role="listbox"` container for selection context
Role — action menu	`role="menuitem"`	Use inside a `role="menu"` for action context
Selected state	`aria-selected="true"`	Set on the currently selected option in a listbox
Disabled state	`aria-disabled="true"`	Prefer over the HTML `disabled` attribute so the item remains focusable
Keyboard — activate	`Enter`	Selects or activates the focused option
Keyboard — navigate	`↑` / `↓`	Moves between options within the list

API

Class / attr	On	Description
.options	<button role="option">	Single selectable row. Flex container with three slots. Default size 40px (md), Body 2 (14/24) typography, 16×16 icons. Use `<button>` for interactivity; `<a>` works too when the row navigates.
.options-lg	.options	Large — 48px tall, 24×24 icons, Body 1 (16/24) typography. Use as a standalone select-style trigger.
(no size class)	.options	Medium (default) — 40px tall, 16×16 icons, Body 2 (14/24) typography. The canonical row inside a menu.
.options-sm	.options	Small — 32px tall, 16×16 icons, Caption 1 (12/16) typography, `--spacing-sm` (12px) horizontal padding. Use in dense toolbars / compact menus.
.options-menu	<div role="listbox">	Wrapper panel. White surface, 1px border, full `--shadow-5` drop shadow, `--radius-xs` corners. Contains one or more `.options` rows.
.options-leading	<span>	Leading slot for an icon, radio dot, avatar, etc. Wrap inline SVG; size auto-scales with the row (24/24/16 px).
.options-label	<span>	The row's text. Stretches to fill available space; truncates with ellipsis on overflow.
.options-trailing	<span>	Trailing slot. Can hold a chevron, a checkmark, a .tag chip, a shortcut hint, or any combination. When combining, items sit side-by-side with an 8px gap (per Figma 3420-2878).
.is-hover	.options	Documentation helper — forces the hover visual at rest. Used in the Full matrix; not needed in production.
.is-disabled	.options	Sets the disabled visual on non-`<button>` elements (anchors, divs). For buttons, use the native `disabled` attribute.
role="listbox"	wrapper	Recommended ARIA role for the menu. Pair with `aria-label`.
role="option"	row	Recommended ARIA role for each item. Pair with `aria-selected="true"` on the active row.