components-label_and_input - EAC design system

Label And Input

Type variations

Text field

Number field

Phone number field

Email field

Password field

<div class="field field--light">
		<label for="text-field">Text field</label>
		<input type="text" id="text-field" placeholder="ex. Some text" name="text-field" >
	</div>

<div class="field field--light">
		<label for="number-field">Number field</label>
		<input type="number" id="number-field" placeholder="ex. 1234" name="number-field" >
	</div>

<div class="field field--light">
		<label for="phone-number-field">Phone number field</label>
		<input type="tel" id="phone-number-field" placeholder="ex. 041231212" name="phone-number-field" >
	</div>

<div class="field field--light">
		<label for="email-field">Email field</label>
		<input type="mail" id="email-field" placeholder="ex. address@mail.com" name="email-field" >
	</div>

<div class="field field--light">
		<label for="password-field">Password field</label>
		<input type="password" id="password-field" placeholder="ex. ********" name="password-field" >
	</div>

Dark theme variations

Defines the appearance on dark mode.

Text field

Number field

Phone number field

Email field

Password field

<div class="field field--dark">
		<label for="text-field-2">Text field</label>
		<input type="text" id="text-field-2" placeholder="ex. Some text" name="text-field-2" >
	</div>

<div class="field field--dark">
		<label for="number-field-2">Number field</label>
		<input type="number" id="number-field-2" placeholder="ex. 1234" name="number-field-2" >
	</div>

<div class="field field--dark">
		<label for="phone-number-field-2">Phone number field</label>
		<input type="tel" id="phone-number-field-2" placeholder="ex. 041234567" name="phone-number-field-2" >
	</div>

<div class="field field--dark">
		<label for="email-field-2">Email field</label>
		<input type="email" id="email-field-2" placeholder="ex. address@mail.com" name="email-field-2" >
	</div>

<div class="field field--dark">
		<label for="password-field-2">Password field</label>
		<input type="password" id="password-field-2" placeholder="ex. ********" name="password-field-2" >
	</div>

Field group (pre-title + quantity buttons)

Add an optional pre-title text (ex: a price) before any type of fields.
Add and optional minus/plus quantity buttons after the number field types (reusing the quantity selector‘s buttons).

€ 500

Quantité

€ 50

Quantité

<div class="fieldGroup  fieldGroup--light">
					<span class="fieldGroup__pre-title">€ 500</span>
		
		<div class="field flex--grow field--light">
			<label for="quantity-500">Quantité</label>
			<input type="number" id="quantity-500" placeholder="2" name="quantity-500" >
		</div>

					<div class="fieldGroup__buttons flex h-gap--xs">
					<button type="button" tabindex='-1' class="btn btn--primary btn--icon btn--small subtract">
	<span class="btn__content">
				<span class="u-sr-accessible">Retirer</span>
					<div class="svg-icon svg-icon-subtract">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="subtract"><path id="Vector" d="M0.75 12.038H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
						<button type="button" tabindex='-1' class="btn btn--primary btn--icon btn--small add">
	<span class="btn__content">
				<span class="u-sr-accessible">Ajouter</span>
					<div class="svg-icon svg-icon-add">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="add" clip-path="url(#clip0_3_2032)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12 0.75V23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2032"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</button>
				</div>
			</div>

<div class="fieldGroup  fieldGroup--light">
					<span class="fieldGroup__pre-title">€ 50</span>
		
		<div class="field flex--grow field--light">
			<label for="quantity-50">Quantité</label>
			<input type="number" id="quantity-50" placeholder="8" name="quantity-50" >
		</div>

					<div class="fieldGroup__buttons flex h-gap--xs">
					<button type="button" tabindex='-1' class="btn btn--primary btn--icon btn--small subtract">
	<span class="btn__content">
				<span class="u-sr-accessible">Retirer</span>
					<div class="svg-icon svg-icon-subtract">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="subtract"><path id="Vector" d="M0.75 12.038H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
			</div>
			</span>
		</button>
						<button type="button" tabindex='-1' class="btn btn--primary btn--icon btn--small add">
	<span class="btn__content">
				<span class="u-sr-accessible">Ajouter</span>
					<div class="svg-icon svg-icon-add">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="add" clip-path="url(#clip0_3_2032)"><path id="Vector" d="M0.75 12H23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path id="Vector_2" d="M12 0.75V23.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_3_2032"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
			</div>
			</span>
		</button>
				</div>
			</div>

List of arguments for label and input

Argument	Type	Description	Possible Values
type	string	Defines the label of the field (mandatory even if label is hidden).	text, number, tel, mail, password
label	string	Defines the label of the field (mandatory even if label is hidden).	—
label-slug	string	Defines the label that will be used for the 'name', the 'for' and the 'id' attributes linking the label and the input.	—
theme	string	Specifies the theme of the component.	light, dark
placeholder	string	Defines the placeholder.	—
custom-attributes	string	Defines any other attributes added to the input (ex: pattern).	—
pre-title	string	Optional text (ex: a price) displayed before the field, to reproduce the Figma 'Field group' (shared) composition.	—
quantity-buttons	boolean	When true, adds the quantity selector's minus/plus buttons after the field.	—
skin	array	Defines the skin of the minus/plus buttons shown when 'quantity-buttons' is enabled.	primary, secondary

Design System

Label And Input

Type variations

Dark theme variations

Field group (pre-title + quantity buttons)

List of arguments for label and input

Basics

Components

Templates