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.
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
---