Forms & Inputs·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Framework

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { useState } from "react";
import { Select } from "@sisyphos-ui/react";

export const Country = () => {
  const [value, setValue] = useState<string | number | null>("tr");
  return (
    <Select
      label="Country"
      value={value}
      onChange={setValue}
      searchable
      clearable
      options={[
        { value: "tr", label: "Türkiye" },
        { value: "us", label: "United States" },
      ]}
    />
  );
};

Multi select

Add `multiple` to allow multiple values; `value` becomes an array.

example.tsxtsx

Frameworks you know

Searchable & clearable

`searchable` adds an input filter; `clearable` shows a clear button.

example.tsxtsx

Country

Clear button

Clearable for quick reset — keeps existing keyboard ergonomics.

example.tsxtsx

Framework

Error state

Surface validation with `error` + `errorMessage`.

example.tsxtsx

FrameworkPlease pick a framework to continue.

Infinite scroll

`loading`, `hasMore`, and `onLoadMore` enable server-driven pagination. Works with `searchable`.

example.tsxtsx

Virtualized list

API

Prop	Type	Default	Description
options*	SelectOption[]	—	Options to render (`value`, `label`, optional `description`, `icon`, `disabled`).
value	SelectValue \| null \| SelectValue[]	—	Selected value (controlled): single value or `null`, an array when `multiple`.
onChange	(value: SelectValue \| null \| SelectValue[]) => void	—	Called with the next selection; receives an array when `multiple`.
multiple	boolean	false	Multi-select mode — selected values render as removable tags.
placeholder	string	"Select…"	Text shown while nothing is selected.
searchable	boolean	false	Adds a search input inside the dropdown; filters client-side unless `onSearch` is set.
clearable	boolean	false	Shows a clear button when a value is selected.
creatable	boolean	false	Allow typing arbitrary new values with Enter (multi mode only).
loading	boolean	false	Shows a loading row at the bottom of the list.
onLoadMore	() => void	—	Fired when the listbox scrolls near the bottom; gate with `hasMore` for infinite scroll.
error	boolean	false	Marks the field as invalid for styling and ARIA.
errorMessage	ReactNode	—	Message shown below the field when `error` is true (replaces `helperText`).

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Combobox WAI-ARIA design pattern.

The trigger exposes role="combobox" with aria-expanded, aria-haspopup="listbox", and aria-controls pointing at the open list.
The dropdown is a role="listbox" (aria-multiselectable in multi mode); each option has role="option" with aria-selected and aria-disabled.
aria-invalid and aria-disabled on the trigger mirror error / disabled; the error message is announced with role="alert".
Clear and tag-remove buttons carry descriptive aria-labels ("Clear selection", "Remove <label>").
When searchable, focus moves into the search input as the dropdown opens.

Keyboard interactions

Key	Action
`Enter`	Opens the dropdown when closed; selects the active option when open (or creates the typed value in creatable multi mode).
`Space`	Opens the dropdown when closed.
`ArrowDown`	Opens the dropdown, or moves the active option down.
`ArrowUp`	Moves the active option up.
`Home`	Moves to the first option.
`End`	Moves to the last option.
`Escape`	Closes the dropdown.

Need more?View on npm →