<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>
Inputs
<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>
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>
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>
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>
Checkboxes
<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>
Radio Buttons
<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>
Last updated