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
name string | default: my_input
type string | default: text
placeholder string
required string | default: false
value string
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
---