>skeehn

input

Text input with dither focus

Coreinput.css

Installation

$npx skeehn add input

Preview

Standard text input
Applies dither on focus
This field has an error

Props

PropTypeDefaultDescription
ditherbooleanfalseApply dither pattern on focus
state'error'Validation state
classNamestringAdditional CSS class names

Usage

input.tsx
1import { Input, InputGroup } from '@skeehn/react';23export function LoginForm() {4  return (5    <form className="flex flex-col gap-4">6      <InputGroup label="Email" hint="We'll never share your email">7        <Input type="email" placeholder="you@example.com" dither />8      </InputGroup>9      <InputGroup label="Password">10        <Input type="password" placeholder="Enter password" />11      </InputGroup>12    </form>13  );14}