---
title: Input
description: Displays a form input field or a component that looks like an input field.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputDemo() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "input-demo-api-key"}) {
			API Key
		}
		@input.Input(input.Props{
			ID:          "input-demo-api-key",
			Type:        "password",
			Placeholder: "sk-...",
		})
		@field.Description() {
			Your API key is encrypted and stored securely.
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ 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/input/input.templ" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

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

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go
import "github.com/axadrn/shadcn-templ/v2/components/input"
```

```templ
@input.Input()
```

## Basic

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/input"

templ InputBasic() {
	@input.Input(input.Props{Placeholder: "Enter text"})
}
```

## Field

Use `field.Field`, `field.Label`, and `field.Description` to create an input with a label and description.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputField() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "input-field-username"}) {
			Username
		}
		@input.Input(input.Props{
			ID:          "input-field-username",
			Type:        "text",
			Placeholder: "Enter your username",
		})
		@field.Description() {
			Choose a unique username for your account.
		}
	}
}
```

## Field Group

Use `field.Group` to show multiple `field.Field` blocks and to build forms.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputFieldgroup() {
	@field.Group() {
		@field.Field() {
			@field.Label(field.LabelProps{For: "fieldgroup-name"}) {
				Name
			}
			@input.Input(input.Props{ID: "fieldgroup-name", Placeholder: "Jordan Lee"})
		}
		@field.Field() {
			@field.Label(field.LabelProps{For: "fieldgroup-email"}) {
				Email
			}
			@input.Input(input.Props{ID: "fieldgroup-email", Type: "email", Placeholder: "name@example.com"})
			@field.Description() {
				We'll send updates to this address.
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@button.Button(button.Props{Type: button.TypeReset, Variant: button.VariantOutline}) {
				Reset
			}
			@button.Button(button.Props{Type: button.TypeSubmit}) {
				Submit
			}
		}
	}
}
```

## Disabled

Use the `Disabled` prop to disable the input. To style the disabled state, set `Disabled` on the `field.Field` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputDisabled() {
	@field.Field(field.Props{Attributes: templ.Attributes{"data-disabled": "true"}}) {
		@field.Label(field.LabelProps{For: "input-demo-disabled"}) {
			Email
		}
		@input.Input(input.Props{
			ID:          "input-demo-disabled",
			Type:        "email",
			Placeholder: "Email",
			Disabled:    true,
		})
		@field.Description() {
			This field is currently disabled.
		}
	}
}
```

## Invalid

Use `aria-invalid` to mark the input as invalid. To style the invalid state, set `Invalid` on the `field.Field` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputInvalid() {
	@field.Field(field.Props{Attributes: templ.Attributes{"data-invalid": "true"}}) {
		@field.Label(field.LabelProps{For: "input-invalid"}) {
			Invalid Input
		}
		@input.Input(input.Props{
			ID:          "input-invalid",
			Placeholder: "Error",
			Attributes: templ.Attributes{"aria-invalid": "true"},
		})
		@field.Description() {
			This field contains validation errors.
		}
	}
}
```

## File

Use the `Type: "file"` prop to create a file input.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputFile() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "picture"}) {
			Picture
		}
		@input.Input(input.Props{
			ID:   "picture",
			Type: "file",
		})
		@field.Description() {
			Select a picture to upload.
		}
	}
}
```

## Inline

Use `field.Field` with `Orientation: field.OrientationHorizontal` to create an inline input. Pair with `button.Button` to create a search input with a button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputInline() {
	@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
		@input.Input(input.Props{
			Type:        "search",
			Placeholder: "Search...",
		})
		@button.Button() {
			Search
		}
	}
}
```

## Grid

Use a grid layout to place multiple inputs side by side.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputGrid() {
	@field.Group(field.GroupProps{Class: "grid max-w-sm grid-cols-2"}) {
		@field.Field() {
			@field.Label(field.LabelProps{For: "first-name"}) {
				First Name
			}
			@input.Input(input.Props{
				ID:          "first-name",
				Placeholder: "Jordan",
			})
		}
		@field.Field() {
			@field.Label(field.LabelProps{For: "last-name"}) {
				Last Name
			}
			@input.Input(input.Props{
				ID:          "last-name",
				Placeholder: "Lee",
			})
		}
	}
}
```

## Required

Use the `Required` prop to indicate required inputs.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputRequired() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "input-required"}) {
			Required Field <span class="text-destructive">*</span>
		}
		@input.Input(input.Props{
			ID:          "input-required",
			Placeholder: "This field is required",
			Required:    true,
		})
		@field.Description() {
			This field must be filled out.
		}
	}
}
```

## Badge

Use `Badge` in the label to highlight a recommended field.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/badge"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputBadge() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "input-badge"}) {
			Webhook URL
			@badge.Badge(badge.Props{
				Variant: badge.VariantSecondary,
				Class:   "ml-auto",
			}) {
				Beta
			}
		}
		@input.Input(input.Props{
			ID:          "input-badge",
			Type:        "url",
			Placeholder: "https://api.example.com/webhook",
		})
	}
}
```

## 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.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/inputgroup"
)

templ InputInputGroup() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "input-group-url"}) {
			Website URL
		}
		@inputgroup.InputGroup() {
			@inputgroup.Input(inputgroup.InputProps{ID: "input-group-url", Placeholder: "example.com"})
			@inputgroup.Addon() {
				@inputgroup.Text() {
					https://
				}
			}
			@inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignInlineEnd}) {
				@icon.Info()
			}
		}
	}
}
```

## Button Group

To add buttons to an input, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) component for more examples.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/buttongroup"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
)

templ InputButtonGroup() {
	@field.Field() {
		@field.Label(field.LabelProps{For: "input-button-group"}) {
			Search
		}
		@buttongroup.ButtonGroup() {
			@input.Input(input.Props{ID: "input-button-group", Placeholder: "Type to search..."})
			@button.Button(button.Props{Variant: button.VariantOutline}) {
				Search
			}
		}
	}
}
```

## Form

A full form example with multiple inputs, a select, and a button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"
)

templ InputForm() {
	<form class="w-full max-w-sm">
		@field.Group() {
			@field.Field() {
				@field.Label(field.LabelProps{For: "form-name"}) {
					Name
				}
				@input.Input(input.Props{
					ID:          "form-name",
					Type:        "text",
					Placeholder: "Axel Adrian",
					Required:    true,
				})
			}
			@field.Field() {
				@field.Label(field.LabelProps{For: "form-email"}) {
					Email
				}
				@input.Input(input.Props{
					ID:          "form-email",
					Type:        "email",
					Placeholder: "john@example.com",
				})
				@field.Description() {
					We'll never share your email with anyone.
				}
			}
			<div class="grid grid-cols-2 gap-4">
				@field.Field() {
					@field.Label(field.LabelProps{For: "form-phone"}) {
						Phone
					}
					@input.Input(input.Props{
						ID:          "form-phone",
						Type:        "tel",
						Placeholder: "+1 (555) 123-4567",
					})
				}
				@field.Field() {
					@field.Label(field.LabelProps{For: "form-country"}) {
						Country
					}
					@selectcomp.Select(selectcomp.Props{Value: "us"}) {
						@selectcomp.Trigger(selectcomp.TriggerProps{ID: "form-country"}) {
							@selectcomp.Value()
						}
						@selectcomp.Content() {
							@selectcomp.Group() {
								@selectcomp.Item(selectcomp.ItemProps{Value: "us"}) {
									United States
								}
								@selectcomp.Item(selectcomp.ItemProps{Value: "uk"}) {
									United Kingdom
								}
								@selectcomp.Item(selectcomp.ItemProps{Value: "ca"}) {
									Canada
								}
							}
						}
					}
				}
			</div>
			@field.Field() {
				@field.Label(field.LabelProps{For: "form-address"}) {
					Address
				}
				@input.Input(input.Props{
					ID:          "form-address",
					Type:        "text",
					Placeholder: "123 Main St",
				})
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@button.Button(button.Props{Type: button.TypeButton, Variant: button.VariantOutline}) {
					Cancel
				}
				@button.Button(button.Props{Type: button.TypeSubmit}) {
					Submit
				}
			}
		}
	</form>
}
```

## API Reference

### Input

The `Input` component displays a native input element.

| Prop          | Type                                                                        | Default    |
| ------------- | ---------------------------------------------------------------------------- | ---------- |
| `Type`        | `string`                                                                    | `""`       |
| `Name`        | `string`                                                                    | -          |
| `Value`       | `string`                                                                    | -          |
| `Placeholder` | `string`                                                                    | -          |
| `Disabled`    | `bool`                                                                      | `false`    |
| `ReadOnly`    | `bool`                                                                      | `false`    |
| `Required`    | `bool`                                                                      | `false`    |
| `Accept`  | `string`                                                                    | -          |
| `Form`        | `string`                                                                    | -          |
| `Class`       | `string`                                                                    | -          |