# Input (/forms/input)





<ComponentPreview name="input-basic-demo" description="A basic input field." />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger id="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger id="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent id="cli">
    ```bash
    npx shadcn@latest add @preskok/input
    ```
  </TabsContent>

  <TabsContent id="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.

        <ComponentSource name="input" title="registry/preskok/ui/preskok-ui/input.tsx" />
      </Step>

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import { Input } from "@/components/ui/preskok-ui/input"

export function InputDemo() {
  return <Input aria-label="Name" placeholder="Your name" />
}
```

## Examples [#examples]

### Input Group Examples [#input-group-examples]

<ComponentPreview name="input-preskok-demo" description="Input with various addons: icons, loaders, buttons, and text." />

### Controlled Input [#controlled-input]

<ComponentPreview name="input-controlled-demo" description="Controlled input with state management." />

### Input Group [#input-group]

<ComponentPreview name="input-group-demo" description="Input with icons and prefix/suffix text." />

### With Label and Description [#with-label-and-description]

<ComponentPreview name="input-label-description-demo" description="Input with separate label and description components." />

### With TextField [#with-textfield]

<ComponentPreview name="input-text-field-demo" description="Input wrapped in a TextField for better form integration." />

## Components [#components]

### Input [#input]

The base input primitive with consistent styling.

### InputGroup [#inputgroup]

A wrapper that allows you to add icons, loaders, text, or buttons alongside the input.

```tsx
<InputGroup>
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
  <InputGroupInput type="email" />
</InputGroup>
```

## Props [#props]

All standard HTML input props are supported, plus:

| Prop        | Type                          | Default | Description            |
| ----------- | ----------------------------- | ------- | ---------------------- |
| `className` | `string`                      | -       | Additional CSS classes |
| `ref`       | `React.Ref<HTMLInputElement>` | -       | Input element ref      |