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>

Styles

<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>

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

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

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

Password Input

<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>

const passwordInput = document.getElementById('password-input');
const showPasswordButton = document.getElementById('show-password-button');
const showPasswordButtonIcon = document.getElementById('show-password-button-icon');

const eyeOpen = '<!-- Your Icon -->';
const eyeClosed = '<!-- Your Icon -->';

function showPassword() {
    // Show password
    if(passwordInput.type === 'password') {
        passwordInput.type = 'text';
    }

    // Change button icon
    showPasswordButtonIcon.innerHTML = '';
    showPasswordButtonIcon.innerHTML = eyeClosed;

    // Change onclick event
    showPasswordButton.setAttribute('onclick', 'hidePassword()');
}

function hidePassword() {
    // Hide password
    if(passwordInput.type === 'text') {
        passwordInput.type = 'password';
    }

    // Change button icon
    showPasswordButtonIcon.innerHTML = '';
    showPasswordButtonIcon.innerHTML = eyeOpen;

    // Change onclick event
    showPasswordButton.setAttribute('onclick', 'showPassword()');
}

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>

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>

Pin Input

<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>

const submitButton = document.getElementById('submit-digits-button');
const digit1 = document.getElementById('digit1');
const digit2 = document.getElementById('digit2');
const digit3 = document.getElementById('digit3');
const digit4 = document.getElementById('digit4');

digit1.oninput = function() {
    if(digit1.value.length >= 1) {
        digit2.focus();
    }
};

digit2.oninput = function() {
    if(digit2.value.length >= 1) {
        digit3.focus();
    }
};

digit3.oninput = function() {
    if(digit3.value.length >= 1) {
        digit4.focus();
    }
};

digit4.oninput = function() {
    if(digit4.value.length >= 1) {
        submitButton.focus();
    }
};

More Input Fields

<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="mail@example.com">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>

<div class="input-box">
    <label class="text-m" for="phone-input">Phone:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="tel" inputmode="tel" name="phone-input" id="phone-input" placeholder="+01 234 56789">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>

<div class="input-box">
    <label class="text-m" for="url-input">URL:</label>
    <div class="input-field">
        <span class="input-icon">
            <!-- Your Icon -->
        </span>
        <input type="url" inputmode="url" name="url-input" id="url-input" placeholder="https://yourdomain.com">
    </div>
    <span class="text-s input-validation">
        <!-- Your validation message -->
    </span>
</div>

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>

<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>

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

<div class="input-box checkbox-box">
	<input type="checkbox" class="checkbox checkbox-information" name="checkbox-info" id="checkbox-info" checked>
	<label class="checkbox-label" for="checkbox-info" id="checkbox-info-label">
		Information checkbox
	</label>
</div>

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

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

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

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>

<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>

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

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

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

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

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

PreviousButtons NextLinks

Last updated 1 year ago