Source code
src/showcase/partials/components/inputs.html
This file is included in this documentation build. It is displayed as code and is not executed.
<!--
Demonstrate native form controls and their accessible states without submitting data.
@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<div x-data="controlDemo" x-id="['control']" class="catalog-grid mt-4">
<article class="card full">
<header class="card-header"><h3 x-text="$t('galleryTextInputs')"></h3></header>
<div class="card-body">
<div class="catalog-input-grid">
<div>
<label
class="form-label"
:for="$id('control') + '-text'"
x-text="$t('galleryInputName')"
></label>
<input
class="form-control"
:id="$id('control') + '-text'"
type="text"
value="Laurent Declercq"
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-email'"
x-text="$t('galleryInputEmail')"
></label>
<input
class="form-control"
:id="$id('control') + '-email'"
type="email"
value="l.declercq@agon-innovation.ch"
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-search'"
x-text="$t('galleryInputSearch')"
></label>
<input class="form-control" :id="$id('control') + '-search'" type="search" value="" />
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-url'"
x-text="$t('galleryInputUrl')"
></label>
<input
class="form-control"
:id="$id('control') + '-url'"
type="url"
value="https://example.test"
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-tel'"
x-text="$t('galleryInputPhone')"
></label>
<input
class="form-control"
:id="$id('control') + '-tel'"
type="tel"
value="+41 44 000 00 00"
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-number'"
x-text="$t('galleryInputNumber')"
></label>
<input class="form-control" :id="$id('control') + '-number'" type="number" value="3" />
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-date'"
x-text="$t('galleryInputDate')"
></label>
<input
class="form-control"
:id="$id('control') + '-date'"
type="date"
value="2026-09-18"
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-time'"
x-text="$t('galleryInputTime')"
></label>
<input class="form-control" :id="$id('control') + '-time'" type="time" value="09:30" />
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-datetime-local'"
x-text="$t('galleryInputDateTime')"
></label>
<input
class="form-control"
:id="$id('control') + '-datetime-local'"
type="datetime-local"
value="2026-09-18T09:30"
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-password'"
x-text="$t('galleryInputPassword')"
></label>
<div class="input-group">
<input
class="form-control"
:id="$id('control') + '-password'"
:type="revealed ? 'text' : 'password'"
value="demonstration"
autocomplete="off"
/>
<button
class="btn btn-secondary"
@click="revealed = !revealed"
:aria-pressed="revealed"
x-text="$t(revealed ? 'galleryHide' : 'galleryReveal')"
></button>
</div>
</div>
<div class="full">
<label class="form-label" :for="$id('control') + '-notes'" x-text="$t('notes')"></label>
<textarea
class="form-control"
:id="$id('control') + '-notes'"
rows="3"
maxlength="500"
></textarea>
</div>
</div>
</div>
</article>
<article class="card ">
<header class="card-header"><h3 x-text="$t('gallerySelect')"></h3></header>
<div class="card-body">
<div class="demo-stack">
<label
class="form-label"
:for="$id('control') + '-plan'"
x-text="$t('galleryPlan')"
></label>
<select class="form-select" :id="$id('control') + '-plan'" x-model="choice">
<option value="standard" x-text="$t('galleryStandard')"></option>
<option value="advanced" x-text="$t('galleryAdvanced')"></option>
</select>
<fieldset>
<legend class="form-label" x-text="$t('galleryPlan')"></legend>
<template x-for="plan in ['standard','advanced']" :key="plan">
<label class="form-check">
<input
class="form-check-input"
type="radio"
:name="$id('control') + '-radio'"
:value="plan"
x-model="choice"
/>
<span x-text="$t(plan === 'standard' ? 'galleryStandard' : 'galleryAdvanced')"></span>
</label>
</template>
</fieldset>
<label
class="form-label"
:for="$id('control') + '-regions'"
x-text="$t('galleryRegion')"
></label>
<select class="form-select" :id="$id('control') + '-regions'" multiple size="3">
<option>Zurich</option>
<option>Paris</option>
<option>Berlin</option>
</select>
<label class="form-check">
<input type="checkbox" class="form-check-input" checked />
<span x-text="$t('emailNotifications')"></span>
</label>
<label class="form-check">
<input type="checkbox" class="form-check-input" x-init="markMixed($el)" />
<span x-text="$t('galleryMixed')"></span>
</label>
<label class="form-check">
<input type="checkbox" class="form-check-input" disabled />
<span x-text="$t('disabled')"></span>
</label>
<label class="form-check form-switch">
<input type="checkbox" class="form-check-input" role="switch" x-model="enabled" />
<span x-text="$t('enabled')"></span>
</label>
</div>
</div>
</article>
<article class="card ">
<header class="card-header"><h3 x-text="$t('gallerySpecialInputs')"></h3></header>
<div class="card-body">
<div class="demo-stack">
<label
class="form-label"
:for="$id('control') + '-files'"
x-text="$t('galleryFile')"
></label>
<input
type="file"
class="form-control"
:id="$id('control') + '-files'"
multiple
@change="selectFiles"
:aria-describedby="$id('control') + '-file-help'"
/>
<p class="form-text" :id="$id('control') + '-file-help'" x-text="$t('galleryFileHelp')"></p>
<ul class="small">
<template x-for="(file, index) in files" :key="index"><li x-text="file"></li></template>
</ul>
<label class="form-label" :for="$id('control') + '-range'">
<span x-text="$t('galleryCapacity')"></span>
<output x-text="capacity + '%'"></output>
</label>
<input
class="form-range"
type="range"
min="0"
max="100"
step="5"
:id="$id('control') + '-range'"
x-model.number="capacity"
/>
<label
class="form-label"
:for="$id('control') + '-color'"
x-text="$t('galleryColorPicker')"
></label>
<input
class="form-control form-control-color"
type="color"
value="#ff7a00"
:id="$id('control') + '-color'"
/>
</div>
</div>
</article>
<article class="card full">
<header class="card-header"><h3 x-text="$t('galleryInputStates')"></h3></header>
<div class="card-body">
<div class="catalog-input-grid">
<div>
<label
class="form-label"
:for="$id('control') + '-readonly'"
x-text="$t('galleryReadOnly')"
></label>
<input
class="form-control"
:id="$id('control') + '-readonly'"
value="@agon/atrium"
readonly
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-disabled'"
x-text="$t('galleryDisabled')"
></label>
<input
class="form-control"
:id="$id('control') + '-disabled'"
value="Disabled"
disabled
/>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-valid'"
x-text="$t('galleryValid')"
></label>
<input class="form-control is-valid" :id="$id('control') + '-valid'" value="atrium" />
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-invalid'"
x-text="$t('galleryInvalid')"
></label>
<input
class="form-control is-invalid"
:id="$id('control') + '-invalid'"
aria-invalid="true"
:aria-describedby="$id('control') + '-error'"
/>
<div
class="invalid-feedback"
:id="$id('control') + '-error'"
x-text="$t('required')"
></div>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-handle'"
x-text="$t('galleryHandle')"
></label>
<div class="input-group">
<span class="input-group-text">@</span>
<input class="form-control" :id="$id('control') + '-handle'" value="atrium" />
</div>
</div>
<div class="form-floating">
<input class="form-control" :id="$id('control') + '-floating'" placeholder="example" />
<label :for="$id('control') + '-floating'" x-text="$t('galleryFloating')"></label>
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-small'"
x-text="$t('gallerySmall')"
></label>
<input class="form-control form-control-sm" :id="$id('control') + '-small'" />
</div>
<div>
<label
class="form-label"
:for="$id('control') + '-large'"
x-text="$t('galleryLarge')"
></label>
<input class="form-control form-control-lg" :id="$id('control') + '-large'" />
</div>
</div>
</div>
</article>
</div>