Inputs

Overview

Inputs are elements which allow you to let user interacts with your website. They are essantially : text input, password, number, select, textarea, radio, checkbox. Many others will be presented in this page.

Main Inputs

Here below are main inputs that are mostly use on a website.

Text Field

Password Field

Email Field

Number Field

Select a date

Select a time

Select a file

Select files

Textarea Field

Copied !

---
import TextField from "$components/field/text/TextField.astro";
import PasswordField from "$components/field/password/PasswordField.astro";
import EmailField from "$components/field/email/EmailField.astro";
import NumberField from "$components/field/number/NumberField.astro";
import TextareaField from "$components/field/textarea/TextareaField.astro";
import DateField from "$components/field/date/DateField.astro";
import TimeField from "$components/field/time/TimeField.astro";
import FileField from "$components/field/file/FileField.astro";
---

<div class="grid grid-cols-2 gap-2 items-center">
  <TextField
    label="Text Field"
    id="username"
    name="username"
    placeholder="type your username here"
    @input="console.log($event.target.value)"
  />
  <PasswordField
    label="Password Field"
    id="password"
    name="password"
    placeholder="type your password here"
  />
  <EmailField
    label="Email Field"
    id="email"
    name="email"
    placeholder="example@email.com"
    @input="console.log($event.target.value)"
  />
  <div class="flex items-center justify-center">
    <NumberField
      label="Number Field"
      id="quantity"
      name="quantity"
      min={1}
      max={5}
      class="w-24"
      @input="console.log($event.target.value)"
    />
  </div>
  <DateField
    label="Select a date"
    id="datefield"
    name="datefield"
    @input="console.log($event.target.value)"
  />
  <TimeField
    label="Select a time"
    id="timefield"
    name="timefield"
    @input="console.log($event.target.value)"
  />
  <FileField label="Select a file" @input="console.log($event.target.value)" />
  <FileField
    label="Select files"
    @input="console.log($event.target.value)"
    multiple
  />
  <div class="col-span-2">
    <TextareaField
      placeholder="This is textarea component"
      label="Textarea Field"
      @input="console.log($event.target.value)"
      class="flex flex-col h-48"
    />
  </div>
</div>

Selected input

Select is an element listing a number of value to choose.

Select Field

Copied !

---
import type { SelectOptionType } from "$components/input/types";
import SelectField from "$components/field/select/SelectField.astro";

const items: SelectOptionType[] = [
  {
    label: "Milk",
    value: "milk",
    disabled: false,
  },
  {
    label: "Eggs",
    value: "eggs",
    disabled: false,
  },
  {
    label: "Cheese",
    value: "cheese",
    disabled: false,
  },
  {
    label: "Bread",
    value: "bread",
    disabled: false,
  },
  {
    label: "Apples",
    value: "apples",
    disabled: false,
  },
  {
    label: "Bananas",
    value: "bananas",
    disabled: false,
  },
  {
    label: "Yogurt",
    value: "yogurt",
    disabled: false,
  },
  {
    label: "Sugar",
    value: "sugar",
    disabled: false,
  },
  {
    label: "Salt",
    value: "salt",
    disabled: false,
  },
  {
    label: "Coffee",
    value: "coffee",
    disabled: false,
  },
  {
    label: "Tea",
    value: "tea",
    disabled: false,
  },
];
---

<SelectField
  label="Select Field"
  id="select-field"
  name="select-field"
  placeholder="Select an item"
  @change="console.log($event.target.value)"
  {items}
/>

Multiple Selected input

A select input component with multiple props set to true.

Multiple Select Field

Copied !

---
import type { SelectOptionType } from "$components/input/types";
import SelectField from "$components/field/select/SelectField.astro";

const items: SelectOptionType[] = [
  {
    label: "Milk",
    value: "milk",
    disabled: false,
  },
  {
    label: "Eggs",
    value: "eggs",
    disabled: false,
  },
  {
    label: "Cheese",
    value: "cheese",
    disabled: false,
  },
  {
    label: "Bread",
    value: "bread",
    disabled: false,
  },
  {
    label: "Apples",
    value: "apples",
    disabled: false,
  },
  {
    label: "Bananas",
    value: "bananas",
    disabled: false,
  },
  {
    label: "Yogurt",
    value: "yogurt",
    disabled: false,
  },
  {
    label: "Sugar",
    value: "sugar",
    disabled: false,
  },
  {
    label: "Salt",
    value: "salt",
    disabled: false,
  },
  {
    label: "Coffee",
    value: "coffee",
    disabled: false,
  },
  {
    label: "Tea",
    value: "tea",
    disabled: false,
  },
];
---

<SelectField
  label="Multiple Select Field"
  id="select-field"
  name="select-field"
  placeholder="Select an item"
  @change="console.log($event.target.value)"
  multiple
  {items}
/>

Radio input

Radio input allows a single choice between many propositions.

Associated with Alpine interop, you can intercept the radio value with @change / @input listener.

Radio 1

Radio 2

Radio 3

Copied !

---
import RadioInput from "$components/input/radio/RadioInput.astro";
---

<div class="flex gap-x-4">
  <div class="flex items-center gap-x-2">
    <label for="radio-1">Radio 1</label>
    <RadioInput
      @change={`console.log($event.target.id, $event.target.checked)`}
      name="radio"
      value="radio-1"
      id="radio-1"
    />
  </div>
  <div class="flex items-center gap-x-2">
    <label for="radio-2">Radio 2</label>
    <RadioInput
      @change={`console.log($event.target.id, $event.target.checked)`}
      name="radio"
      value="radio-2"
      id="radio-2"
    />
  </div>
  <div class="flex items-center gap-x-2">
    <label for="radio-3">Radio 3</label>
    <RadioInput
      @change={`console.log($event.target.id, $event.target.checked)`}
      name="radio"
      value="radio-3"
      id="radio-3"
    />
  </div>
</div>

Checkbox input

Checkbox input in the other hands, allows you to select as many choices between propositions.

Associated with Alpine interop, you can intercept the value with @change / @input listener.

Checkbox 1

Checkbox 2

Checkbox 3

Copied !

---
import CheckboxInput from "$components/input/checkbox/CheckboxInput.astro";
---

<div class="flex gap-x-4">
  <div class="flex items-center gap-x-2">
    <label for="checkbox-1">Checkbox 1</label>
    <CheckboxInput
      @change={`console.log($event.target.id, $event.target.checked)`}
      name="checkbox-1"
      value="checkbox-1"
      id="checkbox-1"
    />
  </div>
  <div class="flex items-center gap-x-2">
    <label for="checkbox-2">Checkbox 2</label>
    <CheckboxInput
      @change={`console.log($event.target.id, $event.target.checked)`}
      name="checkbox-2"
      value="checkbox-2"
      id="checkbox-2"
    />
  </div>
  <div class="flex items-center gap-x-2">
    <label for="checkbox-3">Checkbox 3</label>
    <CheckboxInput
      @change={`console.log($event.target.id, $event.target.checked)`}
      name="checkbox-3"
      value="checkbox-3"
      id="checkbox-3"
    />
  </div>
</div>