Primitives

@texuli/primitives is the unstyled layer under Texuli: behavior, keyboard, focus and ARIA, with no styles of its own. Each primitive below shows its parts and how they nest, the WAI-ARIA pattern it follows, and the behavior checks from the repository's behavior suite.

41 primitives. 41 have a behavior scenario (281 checks in all), run on Chromium, WebKit and the Pixel 7.

• Accordion

  Stacked headings that each show or hide a section of content.

  Import

  @texuli/primitives/accordion

  Pattern

  Accordion

  Parts

  5

  Behavior

  5 rows

• AlertDialog

  A modal dialog that interrupts to confirm or cancel an action.

  Import

  @texuli/primitives/alert-dialog

  Pattern

  Alert dialog

  Parts

  9

  Behavior

  8 rows

• Avatar

  An image with a fallback while it loads or when it fails.

  Import

  @texuli/primitives/avatar

  Pattern

  Image with text fallback

  Parts

  3

  Behavior

  3 rows

• Calendar

  A locale-aware month grid with keyboard navigation between days.

  Import

  @texuli/primitives/calendar

  Pattern

  Date picker dialog (grid)

  Parts

  5

  Behavior

  7 rows

• Checkbox

  A two- or three-state checkbox, alone or in a group.

  Import

  @texuli/primitives/checkbox

  Pattern

  Checkbox

  Parts

  3

  Behavior

  7 rows

• Collapsible

  One button that shows or hides one region.

  Import

  @texuli/primitives/collapsible

  Pattern

  Disclosure

  Parts

  3

  Behavior

  5 rows

• ColorPicker

  A two-dimensional color area with hue and alpha sliders, a format field and swatches.

  Import

  @texuli/primitives/color-picker

  Pattern

  Slider

  Parts

  6

  Behavior

  1 checks

• Combobox

  A text input that filters a popup list of options, for one or many values.

  Import

  @texuli/primitives/combobox

  Pattern

  Combobox

  Parts

  13

  Behavior

  6 rows

• Command

  A search field over a filtered, grouped command list.

  Import

  @texuli/primitives/command

  Pattern

  Combobox with listbox popup

  Parts

  9

  Behavior

  5 rows

• ContextMenu

  A menu opened by right-click, long press or the Menu key on a region.

  Import

  @texuli/primitives/context-menu

  Pattern

  Menu

  Parts

  3

  Behavior

  7 checks

• DateField

  A segmented date (or time) input, one spin button per segment.

  Import

  @texuli/primitives/date-field

  Pattern

  Spinbutton (per segment)

  Parts

  2

  Behavior

  5 rows

• DatePicker

  A date field with a button that opens a calendar dialog.

  Import

  @texuli/primitives/date-picker

  Pattern

  Date picker dialog

  Parts

  5

  Behavior

  11 rows

• Dialog

  A modal window that traps focus, makes the page inert and restores focus on close.

  Import

  @texuli/primitives/dialog

  Pattern

  Dialog (modal)

  Parts

  8

  Behavior

  14 rows

• FileDrop

  A drop zone and file button that validates type, size and count.

  Import

  @texuli/primitives/file-drop

  Pattern

  Button

  Parts

  1

  Behavior

  2 rows

• HoverCard

  A preview card shown on hover or focus of a link, for sighted pointer users.

  Import

  @texuli/primitives/hover-card

  Pattern

  Non-modal preview (no APG pattern)

  Parts

  3

  Behavior

  6 rows

• Label and Field

  A label, description and error wired to one control by id.

  Import

  @texuli/primitives/label

  Pattern

  Native labelling

  Parts

  6

  Behavior

  8 rows

• Listbox

  An inline list of options with single or multiple selection.

  Import

  @texuli/primitives/listbox

  Pattern

  Listbox

  Parts

  2

  Behavior

  6 rows

• Menu

  A menu button and its menu, with checkbox and radio items and submenus.

  Import

  @texuli/primitives/menu

  Pattern

  Menu button

  Parts

  14

  Behavior

  12 rows

• Menubar

  A horizontal bar of menus, as in a desktop application.

  Import

  @texuli/primitives/menubar

  Pattern

  Menubar

  Parts

  13

  Behavior

  12 rows

• NavigationMenu

  Site navigation whose items open flyout panels of links.

  Import

  @texuli/primitives/navigation-menu

  Pattern

  Disclosure navigation menu

  Parts

  8

  Behavior

  13 rows

• NumberField

  A locale-aware number input with step buttons.

  Import

  @texuli/primitives/number-field

  Pattern

  Spinbutton

  Parts

  4

  Behavior

  6 checks

• Pagination

  Page links with previous and next buttons and collapsed ranges.

  Import

  @texuli/primitives/pagination

  Pattern

  Navigation landmark

  Parts

  5

  Behavior

  5 rows

• PinInput

  A one-time code entered one character per cell.

  Import

  @texuli/primitives/pin-input

  Pattern

  Text input

  Parts

  2

  Behavior

  10 rows

• Popover

  A non-modal (or modal) panel anchored to a button.

  Import

  @texuli/primitives/popover

  Pattern

  Disclosure / dialog

  Parts

  4

  Behavior

  9 rows

• Portal

  Moves its content to the end of the document body (or a target).

  Import

  @texuli/primitives/portal

  Pattern

  Utility

  Parts

  1

  Behavior

  3 rows

• Progress

  A determinate or indeterminate progress bar.

  Import

  @texuli/primitives/progress

  Pattern

  progressbar role

  Parts

  1

  Behavior

  3 rows

• RadioGroup

  A set of radio buttons where one is checked, with arrow-key movement.

  Import

  @texuli/primitives/radio-group

  Pattern

  Radio group

  Parts

  2

  Behavior

  7 rows

• ScrollArea

  A scroll region with custom, still accessible scrollbars.

  Import

  @texuli/primitives/scroll-area

  Pattern

  Scrollable region

  Parts

  5

  Behavior

  5 rows

• Select

  A button that opens a listbox of options, with groups and typeahead.

  Import

  @texuli/primitives/select

  Pattern

  Select-only combobox

  Parts

  9

  Behavior

  10 rows

• Separator

  A horizontal or vertical divider, semantic or decorative.

  Import

  @texuli/primitives/separator

  Pattern

  separator role

  Parts

  1

  Behavior

  4 rows

• Sheet

  A dialog that slides in from an edge; Drawer adds drag to dismiss.

  Import

  @texuli/primitives/sheet

  Pattern

  Dialog (modal)

  Parts

  8

  Behavior

  10 checks

• Slider

  One or more thumbs on a track, with steps and ticks.

  Import

  @texuli/primitives/slider

  Pattern

  Slider

  Parts

  4

  Behavior

  10 rows

• Splitter

  Resizable panes separated by keyboard-operable handles.

  Import

  @texuli/primitives/splitter

  Pattern

  Window splitter

  Parts

  3

  Behavior

  8 checks

• Switch

  An on/off control.

  Import

  @texuli/primitives/switch

  Pattern

  Switch

  Parts

  2

  Behavior

  6 rows

• Tabs

  A tab list where each tab shows one panel.

  Import

  @texuli/primitives/tabs

  Pattern

  Tabs

  Parts

  4

  Behavior

  7 rows

• TagsInput

  A text input that turns entries into removable tags.

  Import

  @texuli/primitives/tags-input

  Pattern

  Text input with a list

  Parts

  5

  Behavior

  8 checks

• Toast

  Timed notifications announced politely, with actions.

  Import

  @texuli/primitives/toast

  Pattern

  Alert

  Parts

  8

  Behavior

  4 rows

• Toggle

  A pressed/unpressed button, alone or in a group.

  Import

  @texuli/primitives/toggle

  Pattern

  Button (toggle)

  Parts

  3

  Behavior

  5 rows

• Toolbar

  A row of controls reached with one Tab stop and arrow keys.

  Import

  @texuli/primitives/toolbar

  Pattern

  Toolbar

  Parts

  6

  Behavior

  8 checks

• Tooltip

  A short description shown on hover or focus, after a delay.

  Import

  @texuli/primitives/tooltip

  Pattern

  Tooltip

  Parts

  4

  Behavior

  6 rows

• Tree

  A hierarchical list with expand, collapse, selection and lazy children.

  Import

  @texuli/primitives/tree

  Pattern

  Tree view

  Parts

  1

  Behavior

  4 checks