❯
◇

VisuallyHidden

3 parts

Visually hides its content while keeping it available to assistive technology. The element is removed from the visual layout but stays in the accessibility tree (and remains focusable) so screen readers can still announce it. Use it for accessible labels, status text, or skip links that should be heard but not seen — for example a hidden heading, an icon-only button's name, or extra context for a control.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue
import {
  VisuallyHidden,
  VisuallyHiddenInput,
  VisuallyHiddenInputBubble,
} from '@robonen/primitives/utilities/visually-hidden';

<VisuallyHidden>
  <VisuallyHiddenInput />
  <VisuallyHiddenInputBubble />
</VisuallyHidden>

API Reference

VisuallyHidden

Root

Visually hides its content while keeping it available to assistive technology. The element is removed from the visual layout but stays in the accessibility tree (and remains focusable) so screen readers can still announce it. Use it for accessible labels, status text, or skip links that should be heard but not seen — for example a hidden heading, an icon-only button's name, or extra context for a control.

PropTypeDescription
feature?'focusable' | 'hidden'How the content participates: 'focusable' keeps it in the accessibility tree and focusable (visually hidden only — e.g. skip links); 'hidden' additionally hides it from layout and focus.

VisuallyHiddenInput

Input

Bridges a custom control's value into native form submission. It serializes the bound `value` into one visually-hidden native `<input>` per leaf so the data is submitted with the owning `<form>` and participates in native constraint validation: - primitives (`string | number | boolean | null | undefined`) → a single input named `name`; - arrays of primitives → `name[index]`; - arrays of objects → `name[index][key]`; - plain objects → `name[key]`. A `required` field bound to an empty array still renders one input, so native `required` validation fires on empty multi-selects.

PropTypeDescription
valueTThe value to serialize and submit.

VisuallyHiddenInputBubble

InputBubble
PropTypeDescription
namestringName submitted with the owning form.
valueTValue submitted with the owning form.
checked?booleanChecked state for checkbox/radio-style submission. When provided it is the source of truth driven through the native checked setter; otherwise value is driven through the native value setter.
required?booleanMirror the required constraint so native validation fires.
disabled?booleanMirror the disabled state so the field is excluded from submission.
feature?VisuallyHiddenProps['feature']Visual-hiding strategy passed through to VisuallyHidden.