Input

@/components/kamod-ui/input

API Key

Your API key is encrypted and stored securely.

Installation

Import Input from `@/components/kamod-ui/input`.

pnpm add @kamod-ch/ui

Usage

Pair with Field for label and description. Use orientation="horizontal" on Field for search + button rows. Use InputGroup for prefixed text and icons; ButtonGroup to attach a button flush to the input.

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

<Input />

Demo

Password field with label and helper text (shadcn InputDemo).

Basic

Minimal placeholder (shadcn Basic).

Field

Label and description via Field props.

Username

Choose a unique username for your account.

Field group

Stack multiple Field blocks and a horizontal action row (shadcn Field Group).

Name

We'll send updates to this address.

Disabled

disabled on Input and Field.disabled for group tone (shadcn Disabled).

This field is currently disabled.

Invalid

aria-invalid on Input and Field.invalid (shadcn Invalid).

Invalid Input

This field contains validation errors.

File

type="file" with file:* styling on Input (shadcn File).

Picture

Select a picture to upload.

Inline

Search field and button in one horizontal Field (shadcn Inline).

Grid

Two columns with CSS grid (shadcn Grid).

First Name

Last Name

Required

Field.required shows an asterisk (shadcn Required).

Required Field

This field must be filled out.

Badge

Badge in the label row (shadcn Badge).

Webhook URLBeta

Input group

Prefix text and trailing icon via InputGroup (shadcn Input Group).

Website URL

https://

Button group

Flush input + button via ButtonGroup (shadcn Button Group).

Form

Full form with Select (shadcn Form). Country uses Label + id on SelectTrigger.

Sizes

sm / md / lg height and typography.

API Reference

Props, slots and variants for this component.

Input

Input component props and accepted values.

Prop	Type	Default
size	`"sm" \| "md" \| "lg"`	`"md"`
type	`string`	`"text"`
placeholder	`string`	`undefined`
disabled	`boolean`	`false`
aria-invalid	`boolean`	`false`
class	`string`	`undefined`

Accessibility Notes

Associate inputs with visible labels (Field, or Label with htmlFor). Use semantic types (email, tel, search, password). Mark validation with aria-invalid and describe errors in Field.error or description.