Input

Displays a form input field or a component that looks like an input field.

package examples import (

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

shadcn-templ add input

Copy and paste the following code into your project.

components/input/input.templ

package input import "github.com/axadrn/shadcn-templ/v2/utils" type Props struct {	ID          string	Class       string	Attributes  templ.Attributes	Name        string	Type        string	Form        string	Placeholder string	Value       string	Disabled    bool	ReadOnly    bool	Required    bool	Accept  string} templ Input(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	<input		id={ p.ID }		if _, hasSlot := p.Attributes["data-slot"]; !hasSlot {			data-slot="input"		}		if p.Type != "" {			type={ p.Type }		}		if p.Name != "" {			name={ p.Name }		}		if p.Placeholder != "" {			placeholder={ p.Placeholder }		}		if p.Value != "" {			value={ p.Value }		}		if p.Type == "file" && p.Accept != "" {			accept={ p.Accept }		}		if p.Form != "" {			form={ p.Form }		}		disabled?={ p.Disabled }		readonly?={ p.ReadOnly }		required?={ p.Required }		class={			utils.CN(				// 1:1 base/ui/input.tsx: structure lives here, the look comes from				// the active style-*.css via cn-input.				"cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",				p.Class,			),		}		{ p.Attributes... }	/>}

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

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

@input.Input()

Basic

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

Field

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

package examples import (

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.

package examples import (

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: "[email protected]"})			@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.

package examples import (

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.

package examples import (

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.

package examples import (

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.

package examples import (

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.

package examples import (

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.

package examples import (

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.

package examples import (

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 component for more examples.

package examples import (

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 component for more examples.

package examples import (

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.

package examples import (

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: "[email protected]",				})				@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`	-

Icon Input Group

On This Page

Installation Usage Basic Field Field Group Disabled Invalid File Inline Grid Required Badge Input Group Button Group Form API Reference Input

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.