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 { EmailField, DateField, FileField, NumberField, PasswordField, TextareaField, TextField, TimeField } from "$components/field.component";

export function MainInputExample() {
	return (
		<div class="grid grid-cols-2 gap-x-2 gap-y-4 items-center">
			<TextField
				label="Text Field"
				id="username"
				name="username"
				placeholder="type your username here"
				x-on: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"
				x-on: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"
					x-on:input="console.log($event.target.value)"
				/>
			</div>
			<DateField
				label="Select a date"
				id="datefield"
				name="datefield"
				x-on:input="console.log($event.target.value)"
			/>
			<TimeField
				label="Select a time"
				id="timefield"
				name="timefield"
				x-on:input="console.log($event.target.value)"
			/>
			<FileField
				label="Select a file"
				x-on:input="console.log($event.target.value)"
			/>
			<FileField
				label="Select files"
				x-on:input="console.log($event.target.value)"
				multiple
			/>
			<div class="col-span-2 border">
				<TextareaField
					placeholder="This is textarea component"
					label="Textarea Field"
					x-on:input="console.log($event.target.value)"
					class="flex flex-col h-48 w-full"
				/>
			</div>
		</div>
	);
}

Selected Input

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

Select Field

Copied !

import { SelectField } from "$components/field.component";

export function SelectInputExample() {
	/**
	 * @type {Array<import("$components/input.component").SelectOptionType>}
	 */
	const items = [
		{
			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
		}
	];

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

multiple-select-input

Multiple Selected Input

A select input component with multiple props set to true.

Select Field

Copied !

import { SelectField } from "$components/field.component";

export function MultipleSelectInputExample() {
	/**
	 * @type {Array<import("$components/input.component").SelectOptionType>}
	 */
	const items = [
		{
			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
		}
	];

	return (
		<SelectField
			label="Select Field"
			id="select-field"
			name="select-field"
			placeholder="Select an item"
			x-on:change="console.log($event.target.value)"
			items={items}
			multiple="true"
		/>
	);
}

radio-input

Radio Input

Radio input allows a single choice between many propositions.

Associated with Alpine interop, you can intercept the radio valuewith x-on:change / x-on:input listener.

Radio 1

Radio 2

Radio 3

Copied !

import { RadioInput } from "$components/input.component";

export function RadioInputExample() {
	return (
		<div class="flex gap-x-4">
			<div class="flex items-center gap-x-2">
				<label for="radio-1">Radio 1</label>
				<RadioInput
					x-on: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
					x-on: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
					x-on:change={`console.log($event.target.id, $event.target.checked)`}
					name="radio"
					value="radio-3"
					id="radio-3"
				/>
			</div>
		</div>
	);
}

checkbox-input

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 x-on:change / x-on:input listener.

Checkbox 1

Checkbox 2

Checkbox 3

Copied !

import { CheckboxInput } from "$components/input.component";

export function CheckboxInputExample() {
	return (
		<div class="flex gap-x-4">
			<div class="flex items-center gap-x-2">
				<label for="checkbox-1">Checkbox 1</label>
				<CheckboxInput
					x-on: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
					x-on: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
					x-on:change={`console.log($event.target.id, $event.target.checked)`}
					name="checkbox-3"
					value="checkbox-3"
					id="checkbox-3"
				/>
			</div>
		</div>
	);
}