snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/content/docs/components/base/input.mdx

@@ -0,0 +1,199 @@
+---
+title: Input
+description: A text input component for forms and user data entry with built-in styling and accessibility features.
+base: base
+component: true
+---
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-demo"
+  previewClassName="*:max-w-xs"
+/>
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">Command</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add input
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps className="mb-0 pt-2">
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="input"
+  title="components/ui/input.tsx"
+  styleName="base-nova"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Input } from "@/components/ui/input"
+```
+
+```tsx
+<Input />
+```
+
+## Basic
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-basic"
+  previewClassName="*:max-w-xs"
+/>
+
+## Field
+
+Use `Field`, `FieldLabel`, and `FieldDescription` to create an input with a
+label and description.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-field"
+  previewClassName="*:max-w-xs"
+/>
+
+## Field Group
+
+Use `FieldGroup` to show multiple `Field` blocks and to build forms.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-fieldgroup"
+  previewClassName="*:max-w-xs"
+/>
+
+## Disabled
+
+Use the `disabled` prop to disable the input. To style the disabled state, add the `data-disabled` attribute to the `Field` component.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-disabled"
+  previewClassName="*:max-w-xs"
+/>
+
+## Invalid
+
+Use the `aria-invalid` prop to mark the input as invalid. To style the invalid state, add the `data-invalid` attribute to the `Field` component.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-invalid"
+  previewClassName="*:max-w-xs"
+/>
+
+## File
+
+Use the `type="file"` prop to create a file input.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-file"
+  previewClassName="*:max-w-xs"
+/>
+
+## Inline
+
+Use `Field` with `orientation="horizontal"` to create an inline input.
+Pair with `Button` to create a search input with a button.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-inline"
+  previewClassName="*:max-w-xs"
+/>
+
+## Grid
+
+Use a grid layout to place multiple inputs side by side.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-grid"
+  previewClassName="p-6"
+/>
+
+## Required
+
+Use the `required` attribute to indicate required inputs.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-required"
+  previewClassName="*:max-w-xs"
+/>
+
+## Badge
+
+Use `Badge` in the label to highlight a recommended field.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-badge"
+  previewClassName="*:max-w-xs"
+/>
+
+## Input Group
+
+To add icons, text, or buttons inside an input, use the `InputGroup` component. See the [Input Group](/docs/components/input-group) component for more examples.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-input-group"
+  previewClassName="*:max-w-xs"
+/>
+
+## Button Group
+
+To add buttons to an input, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) component for more examples.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-button-group"
+  previewClassName="*:max-w-xs"
+/>
+
+## Form
+
+A full form example with multiple inputs, a select, and a button.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-form"
+  previewClassName="h-[32rem]"
+/>
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-rtl"
+  direction="rtl"
+  previewClassName="*:max-w-xs"
+/>