byDefaultHuman
Components

Input

A hand-drawn text input with box or underline style.

Installation

package manager
npx shadcn add https://bydefaulthuman.fun/r/input.json

Props

PropTypeDefaultDescription
error
string
—
Error message shown below the component.
inputStyle
InputStyle
"box"
Controls the `inputStyle` behavior.
label
string
—
Optional label text shown with the component.
theme
CrumbleTheme
—
Overrides the global Crumble theme for this instance.
value
string
—
Controlled input value.
defaultValue
string
—
Initial uncontrolled value.
placeholder
string
—
Placeholder text.
disabled
boolean
—
Disables the input.
onChange
(event) => void
—
Change handler.

Styles

Error state

Invalid email address

Disabled

Accessibility

Input renders a native text input with a real associated label when provided. Error text stays in the document flow, so you can connect it to form-level validation messaging as needed.

Examples

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

<Input label="Name" placeholder="Enter your name" />;