Input

Text input fields with Bloom's soft focus ring and subtle surface styling. Includes a Textarea variant for multi-line content.

Disabled

Input Usage

import { Input } from "@bloomkit/react";
 
<Input placeholder="Enter your name" />
<Input type="email" placeholder="you@example.com" />
<Input type="password" placeholder="Password" />
<Input disabled placeholder="Not editable" />

Textarea Usage

import { Textarea } from "@bloomkit/react";
 
<Textarea placeholder="Write your message..." />
<Textarea disabled placeholder="Read only" />

Input Props

Prop	Type	Default	Description
type	string	"text"	HTML input type (text, email, password, number, etc.)
value	string	—	Controlled value
onChange	(e: ChangeEvent<HTMLInputElement>) => void	—	Called when the value changes
placeholder	string	""	Placeholder text shown when empty
disabled	boolean	false	Disables the input
className	string	""	Additional Tailwind classes
...props	InputHTMLAttributes	—	All standard HTML input attributes are forwarded

Textarea Props

Prop	Type	Default	Description
value	string	—	Controlled value
onChange	(e: ChangeEvent<HTMLTextAreaElement>) => void	—	Called when the value changes
placeholder	string	""	Placeholder text shown when empty
rows	number	—	Number of visible rows
disabled	boolean	false	Disables the textarea
className	string	""	Additional Tailwind classes
...props	TextareaHTMLAttributes	—	All standard HTML textarea attributes are forwarded