Input

A text input field with optional label and multiple size variants.

Preview

Default

With Label

Sizes

Disabled

Usage

tsx

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

<Input placeholder="Enter your name" />
<Input label="Email" type="email" size="lg" />
<Input placeholder="Read only" readOnly />

Props

Prop	Type	Default	Description
`type`	`"text" \| "email" \| "password" \| "number" \| "search" \| "url" \| "tel"`	`"text"`	Input type
`label`	`string`	—	Label text above the input
`placeholder`	`string`	—	Placeholder text
`value`	`string`	—	Current value
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset
`disabled`	`boolean`	`false`	Disabled state
`readOnly`	`boolean`	`false`	Read-only state
`name`	`string`	—	HTML name attribute
`id`	`string`	—	HTML id attribute