Input

The input component is a versatile input field that supports various configurations and states. It can be used for standard text inputs, search fields, password inputs, and more.

Import

To use the input component, first import it into your project:

---
import { Input } from 'free-astro-components'
---

Usage

Here’s how you can use the input component in your Astro project:

Basic Usage

To create a basic input field, use the following code:

---
import { Input } from 'free-astro-components'
---

<Input label="Basic input" placeholder="Enter text..." />

Disabled

To disable the input field, set the disabled prop to true.

---
import { Input } from 'free-astro-components'
---

<Input
  label="Disabled Input"
  placeholder="Disabled input"
  disabled
/>
<Input
  label="Disabled Input"
  value="Disabled input"
  placeholder="Disabled input"
  disabled
/>

Readonly

To make the input field readonly, set the readonly prop to true.

---
import { Input } from 'free-astro-components'
---

<Input
  label="Readonly Input"
  value="Readonly Input"
  readonly
/>

Search

To style the input field as a search input, set the type prop to search.

---
import { Input } from 'free-astro-components'
---

<Input
  label="Search"
  placeholder="Search..."
  type="search"
/>

Password

To use the input field for passwords, set the type prop to password.

---
import { Input } from 'free-astro-components'
---

<Input
  label="Password"
  placeholder="Password..."
  type="password"
/>

With Icon

You can include an icon in the input field using the icon attribute. The icon will be displayed on the right side of the input field. The icon can be selected from a list of available icons .

---
import { Input } from 'free-astro-components'
---
<Input
  icon="star"
  label="Input with Icon"
  placeholder="Enter text..."
/>

Helper Text

You can provide additional information using the helperText prop.

---
import { Input } from 'free-astro-components'
---

<Input
  label="Input with Helper Text"
  placeholder="Enter text..."
  helperText="This is some helper text."
/>

Status

To indicate a specific state of the input field, use the status attribute. Possible values are default, success, and error. You can use helperText to provide additional context.

---
import { Input } from 'free-astro-components'
---

<Input
  label="Default State"
  placeholder="Default state"
  status="default"
  helperText="This is some helper text."
/>
<Input
  label="Success State"
  value="Success state"
  placeholder="Success state"
  status="success"
  helperText="This is a success message."
/>
<Input
  label="Error State"
  placeholder="Error state"
  status="error"
  helperText="This is an error message."
/>

Props

Accessibility

• Keyboard Accessibility: Ensure that the input field can be focused and used with the keyboard.

• ARIA Attributes: Use appropriate ARIA attributes to describe the state of the input, such as aria-invalid for error states.

• Labeling: Provide clear labels for each input field to assist screen reader users.