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. See the Icon component documentation for more information.
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
---