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" />;