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

Preview

example.tsxtsx

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.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

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

export const Email = () => (
  <Input
    label="Email"
    type="email"
    placeholder="name@example.com"
    error
    errorMessage="Please enter a valid email"
  />
);

Error state

Set `error` + `errorMessage` to surface validation feedback.

example.tsxtsx

Password

Password must be at least 12 characters.

Variants

example.tsxtsx

Standard

Outlined

Underline

With start icon

`startIcon` renders inside the input for search, currency, or context icons.

example.tsxtsx

Character count

Set `maxLength` + `showCharacterCount` to surface a live counter.

example.tsxtsx

Display name

0 / 30

Label with help

Compose a label with an adjacent `Tooltip` + info glyph when the field needs inline guidance.

example.tsxtsx

Workspace subdomain?

Copyable value

Pair a read-only `Input` with an adjacent `Button` that writes the value to the clipboard via `navigator.clipboard.writeText`.

example.tsxtsx

Invite link

Sizes

`size` scales the control for dense toolbars or hero forms.

example.tsxtsx

Small

Medium

Large

Real world — search row

Input paired with a Button inside a Card surface.

example.tsxtsx

Search projects

API

Prop	Type	Default	Description
variant	"standard" \| "outlined" \| "underline"	"standard"	Visual treatment.
size	"sm" \| "md" \| "lg"	"md"	Field height + typography scale.
radius	"sm" \| "md" \| "lg" \| "full"	—	Border radius scale.
label	string	—	Field label rendered above the input.
labelTooltip	ReactNode	—	Help content rendered as a tooltip next to the label.
labelTooltipPosition	"top" \| "bottom" \| "left" \| "right"	"top"	Anchors the label tooltip popover.
error	boolean	false	Marks the field as invalid for styling and ARIA.
errorMessage	string	—	Message shown below the field when `error` is true.
startIcon	ReactNode	—	Icon rendered inside the field, before the value.
endIcon	ReactNode	—	Icon rendered inside the field, after the value.
copyable	boolean	false	Renders a copy-to-clipboard button on the trailing side.
onCopy	(value: string) => void	—	Called after a successful clipboard copy.
showCharacterCount	boolean	false	Show a `current / max` counter (requires `maxLength`).
fullWidth	boolean	false	Stretch the input to its container width.
mask	string	—	Mask pattern (`#` digit, `A` letter, `*` alphanumeric, anything else literal). Presets: `tel-tr`, `tel`, `card`, `date`. Caret is locked past the fixed prefix automatically.
onUnmaskedChange	(unmaskedValue: string) => void	—	Fires with the raw value when `mask` is set.

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

Accessibility

Adheres to the Text input WAI-ARIA design pattern.

Label is wired via htmlFor / id; tooltip-mode label uses role="tooltip" for the hint popover.
aria-invalid mirrors error; the error message is announced with role="alert".
Character count and error message are linked through aria-describedby.
Password and copy buttons carry descriptive aria-labels (and aria-live="polite" on the copy button).

Keyboard interactions

Key	Action
`Tab`	Moves focus to the input.
`Enter`	Submits the surrounding form.
`Ctrl`then`A`	Selects the entire value (preserved even when a mask prefix is set).

Need more?View on npm →