Inputs

Default Input Field

<div class="input-box">
    <label class="text-m" for="default-input">Input:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="text" name="default-input" id="default-input" placeholder="Default input">
    </div>
    <span class="text-s input-validation">
        Validation text
    </span>
</div>

Default input example

Styles

Information

<div class="input-box">
	<label class="text-m" for="default-input">Input:</label>
	<div class="input-field input-field-info">
		<span class="input-icon">
			<!-- Your Icon -->
		</span>
		<input class="input-info" type="text" name="default-input" id="default-input" placeholder="Default input">
	</div>
	<span class="text-s input-validation validation-info">
		Information
	</span>
</div>

Success

Warning

Error

Input styles example

Password Input

HTML

<div class="input-box password-input-box">
    <label class="text-m" for="password-input">Password:</label>
    <div class="input-field password-input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="password" name="password-input" id="password-input" placeholder="Password">
        <button class="show-password-button" id="show-password-button" onclick="showPassword()">
            <span class="button-icon" id="show-password-button-icon">
                <!-- Your Icon -->
            </span>
        </button>
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>

JavaScript

Password input example

Search Bar

<div class="searchbar-box">
    <input type="text" class="searchbar" name="searchbar" id="mySearchbar" placeholder="Search">
    <button class="search-button">
        <span class="button-icon">
            <!-- Your Icon -->
        </span>
    </button>
</div>

Search bar example

Select Input

<div class="select-box" id="mySelect">
    <span class="text-l">Select</span>
    <select class="hidden-select">
        <option value="null">Select</option>
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select>
</div>

Select input example

Pin Input

HTML

<div class="digit-box">
    <div class="digit-field-group">
        <input type="number" class="digit-field" name="digit1" id="digit1">
        <input type="number" class="digit-field" name="digit2" id="digit2">
        <input type="number" class="digit-field" name="digit3" id="digit3">
        <input type="number" class="digit-field" name="digit4" id="digit4">
    </div>
    <button type="submit" class="button-m submit-button button-primary" id="submit-digits-button" name="auth-button">
        <span class="button-icon">
            <!-- Your Icon -->
        </span>    
        Authenticate
    </button>
</div>

JavaScript

Pin input example

More Input Fields

Email Input

<div class="input-box email-box">
    <label class="text-m" for="email-input">Email:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="email" inputmode="email" name="email-input" id="email-input" placeholder="[e-mail]">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>

Phone Input

URL Input

More input field examples

Checkboxes

Default Checkbox

<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox" name="default-checkbox" id="default-checkbox" checked>
	<label class="checkbox-label" for="default-checkbox" id="default-checkbox-label">
		Default checkbox
	</label>
</div>

Primary

<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-primary" name="checkbox-primary" id="checkbox-primary" checked>
	<label class="checkbox-label" for="checkbox-primary" id="primary-checkbox-label">
		Primary checkbox
	</label>
</div>

Accent

Information

Success

Warning

Error

Checkbox examples

Radio Buttons

Default Radio Button

<div class="input-box radio-box">
	<input type="radio" class="radio-button" name="radio-button-default" id="radio-button-default">
	<label for="radio-button-default" class="radio-button-label">
		Default radio button
	</label>
</div>

Primary

<div class="input-box radio-box">
	<input type="radio" class="radio-button radio-button-primary" name="radio-button-primary" id="radio-button-primary">
	<label for="radio-button-primary" class="radio-button-label">
		Primary radio button
	</label>
</div>

Accent

Information

Success

Warning

Error

Radio button examples