Foundation·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

We'll never share your email.

Password

Password must be at least 12 characters.

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 { FormControl, FormLabel, FormHelperText, Input } from "@sisyphos-ui/react";

export const Field = () => (
  <FormControl>
    <FormLabel>Email</FormLabel>
    <Input type="email" />
    <FormHelperText>We'll never share your email.</FormHelperText>
  </FormControl>
);

API

Prop	Type	Default	Description
id	string	—	Stable id for the input element. Auto-generated when omitted.
disabled	boolean	false	Marks the whole field as disabled; `FormLabel` picks up the disabled visual.
required	boolean	false	Appends a required marker to `FormLabel`.
readOnly	boolean	false	Marks the field as read-only in the shared context.
error	boolean	false	Switches the field into its error state: hides `FormHelperText`, shows `FormErrorText`.
fullWidth	boolean	false	Stretch the field to its container width.
children*	ReactNode	—	Compose `FormLabel`, the input, `FormHelperText`, and `FormErrorText`.

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

Accessibility

Generates a stable field id and derives ${id}-label, ${id}-helper, and ${id}-error ids shared through context.
FormLabel is automatically wired to the input via htmlFor / id — no manual id plumbing needed.
FormErrorText renders with role="alert" and replaces FormHelperText while error is true; describedBy in context points at whichever is active for aria-describedby wiring.
The required marker (*) appended by FormLabel is aria-hidden, so screen readers rely on the input's own required semantics.

Need more?View on npm →