export const title = "Input field"
export const description = "Free and open-source React input field components built for modern applications and websites. These input fields are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/input",
    rac: "https://react-spectrum.adobe.com/react-aria/Input.html"
}

import * as Demos from "@/components/base/input/inputs.demo.tsx";

<PreviewAndCode title="Input example">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.DefaultDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this input component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add input
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/input" filepath="base/input" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the input field components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Input examples

Below are examples and variations of this input component:

### Default {{ tocOnly:true }}

<PreviewAndCode title="Default">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.DefaultDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

### Disabled {{ tocOnly:true }}

<PreviewAndCode title="Disabled">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.DisabledDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/DisabledDemo" />
    </TabPanel>
</PreviewAndCode>

### Invalid {{ tocOnly:true }}

<PreviewAndCode title="Invalid">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.InvalidDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/InvalidDemo" />
    </TabPanel>
</PreviewAndCode>

### Sizes {{ tocOnly:true }}

<PreviewAndCode title="Sizes">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.SizesDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/SizesDemo" />
    </TabPanel>
</PreviewAndCode>

### Leading icon {{ tocOnly:true }}

<PreviewAndCode title="Leading icon">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.LeadingIconDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/LeadingIconDemo" />
    </TabPanel>
</PreviewAndCode>


### Leading Dropdown {{ tocOnly:true }}

<PreviewAndCode title="Leading dropdown">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.LeadingDropdownDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/LeadingDropdownDemo" />
    </TabPanel>
</PreviewAndCode>

### Trailing dropdown {{ tocOnly:true }}

<PreviewAndCode title="Trailing dropdown">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.TrailingDropdownDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/TrailingDropdownDemo" />
    </TabPanel>
</PreviewAndCode>

### Leading text {{ tocOnly:true }}

<PreviewAndCode title="Leading text">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.LeadingTextDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/LeadingTextDemo" />
    </TabPanel>
</PreviewAndCode>

### Payment input {{ tocOnly:true }}

<PreviewAndCode title="Payment input">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.PaymentInputDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/PaymentInputDemo" />
    </TabPanel>
</PreviewAndCode>

### Trailing button {{ tocOnly:true }}

<PreviewAndCode title="Trailing button">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.TrailingButtonDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/TrailingButtonDemo" />
    </TabPanel>
</PreviewAndCode>

### File upload {{ tocOnly:true }}

<PreviewAndCode title="File upload">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.FileUploadInputDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/FileUploadInputDemo" />
    </TabPanel>
</PreviewAndCode>

### Password input {{ tocOnly:true }}

<PreviewAndCode title="Password input">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.PasswordInputDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/PasswordInputDemo" />
    </TabPanel>
</PreviewAndCode>

### Date input {{ tocOnly:true }}

<PreviewAndCode title="Date input">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.DateInputDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/DateInputDemo" />
    </TabPanel>
</PreviewAndCode>

### Number input horizontal {{ tocOnly:true }}

<PreviewAndCode title="Number input horizontal">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.NumberInputHorizontalDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/NumberInputHorizontalDemo" />
    </TabPanel>
</PreviewAndCode>

### Number input vertical {{ tocOnly:true }}

<PreviewAndCode title="Number input vertical">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-xs">
            <Demos.NumberInputVerticalDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/NumberInputVerticalDemo" />
    </TabPanel>
</PreviewAndCode>

### Tag input {{ tocOnly:true }}

<PreviewAndCode title="Tag input">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-100">
            <Demos.TagInputDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/TagInputDemo" />
    </TabPanel>
</PreviewAndCode>

### Tag input outer {{ tocOnly:true }}

<PreviewAndCode title="Tag input outer">
    <ResizablePreview id="preview" className="flex min-h-[320px] py-32 px-4 md:px-8 items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-100">
            <Demos.TagInputOuterDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="inputs/TagInputOuterDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I validate input fields?",
            answer: "You can validate input fields by using the `isInvalid` prop to mark the field as invalid. Use the `hint` prop to display validation messages to the user. The component automatically shows an error icon when `isInvalid` is true.",
        },
        {
            question: "Can I use custom icons in input fields?",
            answer: "Yes, you can add custom icons to input fields using the `icon` prop, which accepts a React component. The icon should accept `className` and other HTML attributes for proper styling and will be positioned on the left side of the input.",
        },
        {
            question: "What sizes are available for input fields?",
            answer: "Input fields support two sizes: `\"sm\"` (small) and `\"md\"` (medium). You can set the size using the `size` prop on the `Input` component. The default size is `\"sm\"`.",
        },
        {
            question: "How do I add tooltips and help text to inputs?",
            answer: "You can add tooltips using the `tooltip` prop, which displays a help icon with a tooltip on hover. Use the `hint` prop to show persistent help text below the input field. Both can be used together for comprehensive user guidance.",
        },
        {
            question: "Can I add buttons or dropdowns to input fields?",
            answer: "Yes, you can use the `InputGroup` component to add buttons, dropdowns, and text elements to input fields. This unified component handles all input enhancements including action buttons, leading/trailing dropdowns, and text prefixes/suffixes.",
        },
        {
            question: "How do I handle form submission with Input components?",
            answer: "Input components work seamlessly with standard HTML forms and React Aria. Provide a `name` prop to each input for form data collection. You can use controlled components with `value` and `onChange` props or uncontrolled components with `defaultValue`.",
        },
        {
            question: "How do I add keyboard shortcuts to inputs?",
            answer: "You can add keyboard shortcuts using the `shortcut` prop. Pass a string to display custom shortcut text, or pass `true` to show the default `\"⌘K\"` shortcut. The shortcut appears as a badge on the right side of the input.",
        },
    ]}
/>