Input
Text field that allows users to enter and edit values.
TailwindCSS
package showcase
import "github.com/axzilla/templui/components"
templ InputDefault() {
<div class="w-full max-w-sm">
@components.Input(components.InputProps{
Type: "email",
Placeholder: "Email",
},
)
</div>
}
package components
import "github.com/axzilla/templui/utils"
type InputType string
const (
InputTypeText InputType = "text"
InputTypePassword InputType = "password"
InputTypeEmail InputType = "email"
InputTypeNumber InputType = "number"
InputTypeTel InputType = "tel"
InputTypeURL InputType = "url"
InputTypeSearch InputType = "search"
InputTypeDate InputType = "date"
InputTypeTime InputType = "time"
InputTypeFile InputType = "file"
)
type InputProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Type InputType
Placeholder string
Value string
Disabled bool
Readonly bool
Required bool
FileAccept string
HasError bool
}
templ Input(props ...InputProps) {
{{ var p InputProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Type == "" {
{{ p.Type = InputTypeText }}
}
<input
if p.ID != "" {
id={ p.ID }
}
type={ string(p.Type) }
if p.Name != "" {
name={ p.Name }
}
if p.Placeholder != "" {
placeholder={ p.Placeholder }
}
if p.Value != "" {
value={ p.Value }
}
if p.Type == InputTypeFile && p.FileAccept != "" {
accept={ p.FileAccept }
}
disabled?={ p.Disabled }
readonly?={ p.Readonly }
required?={ p.Required }
class={
utils.TwMerge(
"peer flex h-10 w-full px-3 py-2",
"rounded-md border border-input bg-background text-sm ring-offset-background",
"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
"placeholder:text-muted-foreground",
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
utils.If(p.HasError, "border-destructive ring-destructive"),
p.Class,
),
}
{ p.Attributes... }
/>
}
Usage
@components.Input(components.InputProps{...})Examples
File
package showcase
import "github.com/axzilla/templui/components"
templ InputFile() {
<div class="w-full max-w-sm">
@components.Input(components.InputProps{Type: "file"})
</div>
}
package components
import "github.com/axzilla/templui/utils"
type InputType string
const (
InputTypeText InputType = "text"
InputTypePassword InputType = "password"
InputTypeEmail InputType = "email"
InputTypeNumber InputType = "number"
InputTypeTel InputType = "tel"
InputTypeURL InputType = "url"
InputTypeSearch InputType = "search"
InputTypeDate InputType = "date"
InputTypeTime InputType = "time"
InputTypeFile InputType = "file"
)
type InputProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Type InputType
Placeholder string
Value string
Disabled bool
Readonly bool
Required bool
FileAccept string
HasError bool
}
templ Input(props ...InputProps) {
{{ var p InputProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Type == "" {
{{ p.Type = InputTypeText }}
}
<input
if p.ID != "" {
id={ p.ID }
}
type={ string(p.Type) }
if p.Name != "" {
name={ p.Name }
}
if p.Placeholder != "" {
placeholder={ p.Placeholder }
}
if p.Value != "" {
value={ p.Value }
}
if p.Type == InputTypeFile && p.FileAccept != "" {
accept={ p.FileAccept }
}
disabled?={ p.Disabled }
readonly?={ p.Readonly }
required?={ p.Required }
class={
utils.TwMerge(
"peer flex h-10 w-full px-3 py-2",
"rounded-md border border-input bg-background text-sm ring-offset-background",
"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
"placeholder:text-muted-foreground",
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
utils.If(p.HasError, "border-destructive ring-destructive"),
p.Class,
),
}
{ p.Attributes... }
/>
}
Disabled
package showcase
import "github.com/axzilla/templui/components"
templ InputDisabled() {
<div class="w-full max-w-sm">
@components.Input(components.InputProps{
Type: "email",
Placeholder: "Email",
Disabled: true,
},
)
</div>
}
package components
import "github.com/axzilla/templui/utils"
type InputType string
const (
InputTypeText InputType = "text"
InputTypePassword InputType = "password"
InputTypeEmail InputType = "email"
InputTypeNumber InputType = "number"
InputTypeTel InputType = "tel"
InputTypeURL InputType = "url"
InputTypeSearch InputType = "search"
InputTypeDate InputType = "date"
InputTypeTime InputType = "time"
InputTypeFile InputType = "file"
)
type InputProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Type InputType
Placeholder string
Value string
Disabled bool
Readonly bool
Required bool
FileAccept string
HasError bool
}
templ Input(props ...InputProps) {
{{ var p InputProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Type == "" {
{{ p.Type = InputTypeText }}
}
<input
if p.ID != "" {
id={ p.ID }
}
type={ string(p.Type) }
if p.Name != "" {
name={ p.Name }
}
if p.Placeholder != "" {
placeholder={ p.Placeholder }
}
if p.Value != "" {
value={ p.Value }
}
if p.Type == InputTypeFile && p.FileAccept != "" {
accept={ p.FileAccept }
}
disabled?={ p.Disabled }
readonly?={ p.Readonly }
required?={ p.Required }
class={
utils.TwMerge(
"peer flex h-10 w-full px-3 py-2",
"rounded-md border border-input bg-background text-sm ring-offset-background",
"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
"placeholder:text-muted-foreground",
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
utils.If(p.HasError, "border-destructive ring-destructive"),
p.Class,
),
}
{ p.Attributes... }
/>
}
With Label
package showcase
import "github.com/axzilla/templui/components"
templ InputWithLabel() {
<div class="w-full max-w-sm grid gap-2">
@components.Label(components.LabelProps{
For: "email",
}) {
Email
}
@components.Input(components.InputProps{
ID: "email",
Type: "email",
Placeholder: "Email",
})
</div>
}
package components
import "github.com/axzilla/templui/utils"
type InputType string
const (
InputTypeText InputType = "text"
InputTypePassword InputType = "password"
InputTypeEmail InputType = "email"
InputTypeNumber InputType = "number"
InputTypeTel InputType = "tel"
InputTypeURL InputType = "url"
InputTypeSearch InputType = "search"
InputTypeDate InputType = "date"
InputTypeTime InputType = "time"
InputTypeFile InputType = "file"
)
type InputProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Type InputType
Placeholder string
Value string
Disabled bool
Readonly bool
Required bool
FileAccept string
HasError bool
}
templ Input(props ...InputProps) {
{{ var p InputProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Type == "" {
{{ p.Type = InputTypeText }}
}
<input
if p.ID != "" {
id={ p.ID }
}
type={ string(p.Type) }
if p.Name != "" {
name={ p.Name }
}
if p.Placeholder != "" {
placeholder={ p.Placeholder }
}
if p.Value != "" {
value={ p.Value }
}
if p.Type == InputTypeFile && p.FileAccept != "" {
accept={ p.FileAccept }
}
disabled?={ p.Disabled }
readonly?={ p.Readonly }
required?={ p.Required }
class={
utils.TwMerge(
"peer flex h-10 w-full px-3 py-2",
"rounded-md border border-input bg-background text-sm ring-offset-background",
"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
"placeholder:text-muted-foreground",
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
utils.If(p.HasError, "border-destructive ring-destructive"),
p.Class,
),
}
{ p.Attributes... }
/>
}
Form
Enter your email address for notifications.
Please enter a valid email address
package showcase
import "github.com/axzilla/templui/components"
templ InputForm() {
<div class="w-full max-w-sm">
@components.FormItem() {
@components.FormLabel(components.FormLabelProps{
For: "email-form",
}) {
Email
}
@components.Input(components.InputProps{
ID: "email-form",
Type: "email",
Placeholder: "m@example.com",
HasError: true,
})
@components.FormDescription() {
Enter your email address for notifications.
}
@components.FormMessage(components.FormMessageProps{
Variant: components.FormMessageVariantError,
}) {
Please enter a valid email address
}
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type InputType string
const (
InputTypeText InputType = "text"
InputTypePassword InputType = "password"
InputTypeEmail InputType = "email"
InputTypeNumber InputType = "number"
InputTypeTel InputType = "tel"
InputTypeURL InputType = "url"
InputTypeSearch InputType = "search"
InputTypeDate InputType = "date"
InputTypeTime InputType = "time"
InputTypeFile InputType = "file"
)
type InputProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Type InputType
Placeholder string
Value string
Disabled bool
Readonly bool
Required bool
FileAccept string
HasError bool
}
templ Input(props ...InputProps) {
{{ var p InputProps }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.Type == "" {
{{ p.Type = InputTypeText }}
}
<input
if p.ID != "" {
id={ p.ID }
}
type={ string(p.Type) }
if p.Name != "" {
name={ p.Name }
}
if p.Placeholder != "" {
placeholder={ p.Placeholder }
}
if p.Value != "" {
value={ p.Value }
}
if p.Type == InputTypeFile && p.FileAccept != "" {
accept={ p.FileAccept }
}
disabled?={ p.Disabled }
readonly?={ p.Readonly }
required?={ p.Required }
class={
utils.TwMerge(
"peer flex h-10 w-full px-3 py-2",
"rounded-md border border-input bg-background text-sm ring-offset-background",
"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
"placeholder:text-muted-foreground",
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
utils.If(p.HasError, "border-destructive ring-destructive"),
p.Class,
),
}
{ p.Attributes... }
/>
}