disenio.studio — a copy-paste design toolkit

Email

Installation

$pnpm dlx disenio add input

Usage

example.tsx

import { Input } from "@/components/ui/input";

export default function Example() {
  return <Input label="Email" placeholder="hola@disenio.studio" />;
}

Examples

With hint

Email

We'll never share it.

Error state

Email

Needs an @

API

Prop	Type	Default	Description
label	string	—	Label text rendered above the field.
hint	string	—	Helper text below the field.
error	string	—	Error text. Replaces hint and styles the field.
leading	ReactNode	—	Content before the input — icons, prefixes.
trailing	ReactNode	—	Content after the input — icons, suffixes.
...rest	InputHTMLAttributes	—	All standard <input> props are forwarded.

Accessibility

A11y · live audit

updates with theme

Accent on paper

3.97AA Large

Ink on paper

21.00AAA

Keyboard↹ focus · type to enter · ↵ submit form

ARIAaria-describedby auto-wired to hint or error · aria-invalid on error