Control foundations

These are structural shortcuts, not a button or form library. Use the native element for its semantics and add the foundation that fits it.

Class	Contract
`control-base`	Inline-centered control shape, text metrics, icon sizing, border, pointer cursor, and native disabled treatment
`control-icon`	Sizes descendant SVGs; an explicit SVG `w:`/`h:` utility can override it
`control-disabled`	Removes pointer events on native `disabled`, dims native or ARIA disabled state
`field-base`	Full inline size, border, logical padding, auto block size, and responsive minimum block size
`field-disabled`	Dims disabled or ARIA-disabled fields and sets a not-allowed cursor
`checkable-base`	Native appearance reset and inline geometry for checkbox/radio/toggle compositions
`choice-marker`	In-flow 16px icon slot revealed by its direct parent’s `aria-current="true"`
`press-scale`	Active press feedback, removed under reduced motion

html

<button class="control-base focus-ring p-inline:3 min-block-size:9 bg-color:primary-200 text-color:primary-950 border-color:primary-500" type="button">
  Save changes
</button>

<label>
  Display name
  <input class="field-base bg-color:neutral-100 text-color:neutral-950 border-color:neutral-500" name="displayName" />
</label>

The foundation gives the button a shape; the application still chooses its size, surface and text colors. control-base can also style an anchor or a noninteractive display element, but its appearance does not change that element’s semantics. Prefer a real button for an action.

For a current-choice marker, put choice-marker on a direct child of an element whose aria-current is true, and mark the decorative icon aria-hidden="true". Application state must update that attribute. It is not a radio or checkbox selection system.

Prefer native disabled on form controls. aria-disabled="true" only changes appearance here; block pointer and keyboard activation in application logic if you use it. control-disabled and field-disabled have different pointer contracts, so do not combine them on one control. checkable-base removes native appearance; supply a visible checked, mixed, focus, and forced-colors presentation before using it in a production form. field-base has a minimum block size of spacing step 9, then step 8 at sm; it can grow for larger text instead of clipping into a fixed height. Prefer the named Field parts when you need labels, hints, errors, or affixes.

Storybook specimen · Next: Layout