Input
Single text input form field.
---
import Input from "@forms/input/Input.astro";
---
<Input label="Email Address" name="email" placeholder="Enter your email" required type="email" />---
blocks:
_component: building-blocks/forms/input
label: Email Address
name: email
type: email
placeholder: Enter your email
required: true
---Overview #
A single-line text field for collecting user input. Supports text, email, password, phone, URL, and number types, with options for a label, placeholder, default value, and required setting.
Properties #
label string | default: My input
The label text for the input field.
name string | default: my_input
The name attribute for the input field.
type enum | default: text
The input type.
Accepted values:
-
text -
email -
password -
tel -
url -
number
placeholder string
Placeholder text for the input field.
required boolean | default: false
Whether the field is required.
value string
The default value for the input field.
iconName enum
The name of the icon to display. Sourced from [Heroicons](https://heroicons.com/). See the Icon component documentation for more information.
iconColor enum | default: default
The color of the icon.
Accepted values:
-
default -
blue -
green -
yellow -
orange -
red -
purple -
pink -
cyan
iconPosition enum | default: before
The position of the icon relative to the input field.
Accepted values:
-
before -
after
Examples #
Type text #
---
import Input from "@forms/input/Input.astro";
---
<Input label="Full Name" name="name" placeholder="Enter your full name" type="text" />---
blocks:
_component: building-blocks/forms/input
label: Full Name
name: name
type: text
placeholder: Enter your full name
------
import Input from "@forms/input/Input.astro";
---
<Input label="Email Address" name="email" placeholder="Enter your email" type="email" />---
blocks:
_component: building-blocks/forms/input
label: Email Address
name: email
type: email
placeholder: Enter your email
------
import Input from "@forms/input/Input.astro";
---
<Input label="Password" name="password" placeholder="Enter your password" type="password" />---
blocks:
_component: building-blocks/forms/input
label: Password
name: password
type: password
placeholder: Enter your password
------
import Input from "@forms/input/Input.astro";
---
<Input label="Age" name="age" placeholder="Enter your age" type="number" />---
blocks:
_component: building-blocks/forms/input
label: Age
name: age
type: number
placeholder: Enter your age
---Required #
---
import Input from "@forms/input/Input.astro";
---
<Input label="Full Name" name="name" placeholder="Enter your full name" required type="text" />---
blocks:
_component: building-blocks/forms/input
label: Full Name
name: name
type: text
placeholder: Enter your full name
required: true
---Icons #
---
import Input from "@forms/input/Input.astro";
---
<Input iconName="magnifying-glass" iconPosition="after" label="Search" name="search" placeholder="Search by keyword, topic..." type="text" />
<Input iconName="envelope" iconPosition="before" label="Email Address" name="email" placeholder="Your Email Address" type="email" />---
blocks:
- _component: building-blocks/forms/input
label: Search
name: search
type: text
placeholder: Search by keyword, topic...
iconName: magnifying-glass
iconPosition: after
- _component: building-blocks/forms/input
label: Email Address
name: email
type: email
placeholder: Your Email Address
iconName: envelope
iconPosition: before
---Icon colors #
---
import Input from "@forms/input/Input.astro";
---
<Input iconColor="blue" iconName="magnifying-glass" label="Search" name="search" placeholder="Search..." type="text" />
<Input iconColor="green" iconName="envelope" label="Email" name="email" placeholder="you@example.com" type="email" />---
blocks:
- _component: building-blocks/forms/input
label: Search
name: search
type: text
placeholder: Search...
iconName: magnifying-glass
iconColor: blue
- _component: building-blocks/forms/input
label: Email
name: email
type: email
placeholder: you@example.com
iconName: envelope
iconColor: green
---