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

Props table is being written. See the package README for the complete API surface.

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

Need more?View on npm →