Expand Snippet Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input field with designator
</label>
<div class="dk-input__value">
<input
placeholder="Placeholder Text"
class="dk-input"
/>
<span class="dk-input-value">kΩ</span>
</div>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="disabledInput"
class="dk-input-label">
Disabled field
</label>
<input
id="disabledInput"
type="text"
placeholder="Disabled Field"
disabled=""
class="dk-input"
/>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input field with select dropdown
</label>
<div class="dk-input__select">
<input
placeholder="Placeholder Text"
class="dk-input"
/>
<select class="dk-input-select dk-input">
<option class="">Ω</option>
<option class="">kΩ</option>
<option class="">MΩ</option>
</select>
</div>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="errorInput"
class="dk-input-label">
Field with error
</label>
<input
type="text"
id="errorInput"
class="dk-input dk-input--error"
/>
<small class="dk-input__error-feedback">
User Name or Password is incorrect
</small>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input Label
</label>
<small class="dk-input-helper">
This is an example of some
instructional text
</small>
<input
type="text"
id="labelInput"
class="dk-input"
/>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input Label
</label>
<input
type="text"
id="labelInput"
placeholder="Placeholder Text"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Number Only Input Label
</label>
<input
type="number"
pattern="[0-9]*"
min="0"
id="labelInput"
placeholder="123456"
autoComplete="false"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Email Address Input Label
</label>
<input
type="email"
min="0"
id="labelInput"
placeholder="email@address.com"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Phone Number Input Label
</label>
<input
type="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
min="0"
id="labelInput"
placeholder="123-456-7890"
class="dk-input"
/>
<label
for="labelInput"
class="dk-input-label">
Date Input Label
</label>
<input
type="date"
id="labelInput"
placeholder="Placeholder Text"
class="dk-input"
/>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="multiInput1"
class="dk-input-label">
Form Field Group with Multiple Inputs
</label>
<input
id="multiInput1"
type="text"
placeholder="Hint Text"
class="dk-input"
/>
<label
for="multiInput2"
class="sr-only dk-input-label">
Label for 2 input
</label>
<input
id="multiInput2"
type="text"
placeholder="Placeholder"
class="dk-input"
/>
<small class="dk-error-message">
It's wrong
</small>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input field with search icon
</label>
<div class="dk-input__search-icon">
<input class="dk-input" />
</div>
</div>
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input field with placeholder text and
icon
</label>
<div class="dk-input__search-icon">
<input
placeholder="Placeholder Text"
class="dk-input"
/>
</div>
</div>
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input field with red search icon
button
</label>
<div class="dk-input__search-button">
<input
placeholder="Placeholder Text"
class="dk-input"
/>
<button class="dk-input-button"></button>
</div>
</div>
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input field with red button and text
</label>
<div class="dk-input__text-button">
<input
placeholder="Placeholder Text"
class="dk-input"
/>
<button class="dk-input-button">
Submit
</button>
</div>
</div>
Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input Label
</label>
<select class="dk-input">
<option class="">Option 1</option>
<option class="">Option 2</option>
</select>
</div>
Expand Snippet Copy
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Input Label
</label>
<textarea
id="w3review"
name="w3review"
placeholder="this is a placeholder"
rows="8"
cols="50"
class="dk-input">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ipsa at
esse cupiditate hic doloremque,
exercitationem sunt veritatis rerum
tempora adipisci vel nesciunt
architecto asperiores sed neque minus
laboriosam fuga molestias?
</textarea>
</div>