Input

A basic field where users can type text or numbers.

Prop	Type	Description
name	string	HTML name attribute
onChange	(event: ChangeEvent<HTMLTextAreaElement>) => void	onChane property
type?	"tel" \| "email"	Phone number or email type
placeholder?	string	Placeholder text in the input
label?	string	Label assosiated with the input
value?	"string" \| "number"	Actual value of the input
className?	string	Sets class attribute
error?	string	Error message
maxLength?	number	Limits the max input length
style?	CSSProperties	Sets CSS styles
list?	string	Sets list attribute
min?	number	Min characters required
max?	number	Max characters allowed
disabled?	boolean	Disabled the input
pattern?	string	Sets the pattern attribute

import { Input } from "@brick-uikit/input";

Usage input

Basic usage

Basic usage covers the default Input, with optional label, placeholder, and error message.

Invalid input

example.tsx

<Input 
	type="email" 
	label="Email" 
	placeholder="Enter your email" 
/>
<Spacer top={1}/>
<Input 
	name="phone" 
	type="tel" 
	placeholder="Enter your phone" 
/>
<Spacer top={1}/>
<Input error="Invalid input" />

Size / Width

Adjust input width using `style` or CSS, and enforce character limits using `min` and `max` props.

example.tsx

<Input min={5} placeholder="Min 5 chars" />
<Spacer top={1}/>
<Input max={10} placeholder="Max 10 chars" />

Customization

Use `className` or `style` to customize appearance. Apply custom borders, background colors, or other CSS adjustments.

example.tsx

<Input 
	style={{border: "1px solid #931a04", background: "#fff8f5", color: "#931a04" }}
	placeholder="Custom style" 
/>
<Spacer top={1}/>
<Input 
	className={styles.customInput}
	placeholder="Custom class" 
/>

Logic patterns

Controlled inputs, disabled state, validation, and type variations for email and phone.

Phone

Must be 3-10 letters

example.tsx

<Input 
	name="email" 
	onChange={handleChange}
	label="Email"
	type="email"
	placeholder="Enter email"
/>
<Spacer top={1}/>
<Input 
	name="phone"
	onChange={handleChange}
	label="Phone"
	type="tel"
	placeholder="Enter phone"
/>
<Spacer top={1}/>
<Input 
	name="disabled"
	onChange={handleChange}
	disabled
	placeholder="Disabled input"
/>
<Spacer top={1}/>
<Input 
	name="validated"
	onChange={handleChange}
	pattern="[A-Za-z]{3,10}"
	maxLength={10}
	error="Must be 3-10 letters"
	placeholder="Validation example"
/>