components-quantity_selector - EAC design system

Quantity Selector

Appearance variations

Selector 1

<div class="quantitySelector quantitySelector--primary flex h-gap--smallest">
		<button type="button" class="btn btn--primary btn--icon btn--default 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>
	
    <div class="field field-type-number field--default">
        <label for="selector-1" class="input__label"><span class="u-sr-accessible">Selector 1</span></label>
        <input type="number" id="selector-1" placeholder="0"  name="selector-1" />
    </div>

		<button type="button" class="btn btn--primary btn--icon btn--default 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 class="quantitySelector quantitySelector--secondary flex h-gap--smallest">
		<button type="button" class="btn btn--secondary btn--icon btn--default 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>
	
    <div class="field field-type-number field--default">
        <label for="selector-1" class="input__label"><span class="u-sr-accessible">Selector 1</span></label>
        <input type="number" id="selector-1" placeholder="0"  name="selector-1" />
    </div>

		<button type="button" class="btn btn--secondary btn--icon btn--default 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>

Size variations

Selector 1

<div class="quantitySelector quantitySelector--primary flex h-gap--smallest">
		<button type="button" class="btn btn--primary btn--icon btn--default 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>
	
    <div class="field field-type-number field--default">
        <label for="selector-1" class="input__label"><span class="u-sr-accessible">Selector 1</span></label>
        <input type="number" id="selector-1" placeholder="0"  name="selector-1" />
    </div>

		<button type="button" class="btn btn--primary btn--icon btn--default 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 class="quantitySelector quantitySelector--primary flex h-gap--smallest">
		<button type="button" 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>
	
    <div class="field field-type-number field--small">
        <label for="selector-1" class="input__label"><span class="u-sr-accessible">Selector 1</span></label>
        <input type="number" id="selector-1" placeholder="0"  name="selector-1" />
    </div>

		<button type="button" 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>

List of arguments for quantity selector

Argument	Type	Description	Possible Values
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.	—
skin	string	Specifies the skin of the component.	primary, secondary
size	array	Defines the size of the component.	default, small
placeholder	string	Defines the placeholder.	—

Design System

Quantity Selector

Appearance variations

Size variations

List of arguments for quantity selector

Basics

Components

Templates