Your API key is encrypted and stored securely.
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/components/input"
)
templ InputDefault() {
<div class="w-full max-w-md">
@field.Field() {
@field.Label(field.LabelProps{For: "input-demo-api-key"}) {
API Key
}
@input.Input(input.Props{
ID: "input-demo-api-key",
Type: input.TypePassword,
Placeholder: "sk-...",
})
@field.Description() {
Your API key is encrypted and stored securely.
}
}
</div>
}
Installation
templui add input
Load the script once in your layout:
<head>
@input.Script()
</head>
import "github.com/templui/templui/components/input"
Load the script once in your layout:
<head>
@input.Script()
</head>
Examples
Basic
package showcase
import "github.com/templui/templui/components/input"
templ InputBasic() {
<div class="w-full max-w-sm">
@input.Input(input.Props{Placeholder: "Enter text"})
</div>
}
Field
Choose a unique username for your account.
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/components/input"
)
templ InputField() {
@field.Field() {
@field.Label(field.LabelProps{For: "username"}) {
Username
}
@input.Input(input.Props{
ID: "username",
Type: input.TypeText,
Placeholder: "Enter your username",
})
@field.Description() {
Choose a unique username for your account.
}
}
}
Disabled
This field is currently disabled.
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/components/input"
)
templ InputDisabled() {
@field.Field(field.Props{Disabled: true}) {
@field.Label(field.LabelProps{For: "input-demo-disabled"}) {
Email
}
@input.Input(input.Props{
ID: "input-demo-disabled",
Type: input.TypeEmail,
Placeholder: "Email",
Disabled: true,
})
@field.Description() {
This field is currently disabled.
}
}
}
Invalid
This field contains validation errors.
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/components/input"
)
templ InputInvalid() {
@field.Field(field.Props{Invalid: true}) {
@field.Label(field.LabelProps{For: "input-invalid"}) {
Invalid Input
}
@input.Input(input.Props{
ID: "input-invalid",
Placeholder: "Error",
HasError: true,
})
@field.Description() {
This field contains validation errors.
}
}
}
File
Select a picture to upload.
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/components/input"
)
templ InputFile() {
@field.Field() {
@field.Label(field.LabelProps{For: "picture"}) {
Picture
}
@input.Input(input.Props{
ID: "picture",
Type: input.TypeFile,
})
@field.Description() {
Select a picture to upload.
}
}
}
Inline
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/field"
"github.com/templui/templui/components/input"
)
templ InputInline() {
@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
@input.Input(input.Props{
Type: input.TypeSearch,
Placeholder: "Search...",
})
@button.Button() {
Search
}
}
}
Grid
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/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
This field must be filled out.
package showcase
import (
"github.com/templui/templui/components/field"
"github.com/templui/templui/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
package showcase
import (
"github.com/templui/templui/components/badge"
"github.com/templui/templui/components/field"
"github.com/templui/templui/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: input.TypeURL,
Placeholder: "https://api.example.com/webhook",
})
}
}
API Reference
Required parameter
Hover for description
Input
Text field that allows users to enter and edit values.
| Name | Type | Default |
|---|---|---|
Unique identifier for the input element. | | - |
Additional CSS classes to apply to the input. | | - |
Additional HTML attributes to apply to the input element. | | - |
Name attribute for the form input. | | - |
Input type. Options: 'text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'file'. | | |
Placeholder text to display when input is empty. | | - |
Current value of the input field. | | - |
Whether the input is disabled and non-interactive. | | |
Whether the input is read-only. | | |
Accepted file types for file inputs (e.g., '.jpg,.png'). | | - |
Whether the input has a validation error. | | |