A collection of inputs and controls for customer information.
:focus from a form element, unless you provide an alternative indicator.
<label class="form__label form__label--checkbox">
<input type="checkbox" class="form__checkbox">
Active Checkbox
</label>
<label class="form__label form__label--disabled form__label--checkbox">
<input type="checkbox" disabled class="form__checkbox">
Disabled Checkbox
</label>Checkboxes are used to make a range of selections on specific items. Checkboxes also trigger components like the Bulk Selector. The form__checkbox ensures the native checkbox styling are preserved.
<label class="form__label form__label--checkbox">
<input type="checkbox" class="input-checkbox">
Active UT Checkbox
</label>
<label class="form__label form__label--disabled form__label--checkbox">
<input type="checkbox" disabled class="input-checkbox">
Disabled UT Checkbox
</label>For specific cases, like the dashboard, the custom UserTesting styled checkboxes may be used. The input-checkbox class provides the custom styling.
<label class="form__label form__label--checkbox form__label--small">
<input type="checkbox" class="input-checkbox input-checkbox--small">
Small
</label>
<label class="form__label form__label--checkbox form__label--medium">
<input type="checkbox" class="input-checkbox input-checkbox--medium">
Medium
</label>
<label class="form__label form__label--checkbox form__label--large">
<input type="checkbox" class="input-checkbox input-checkbox--large">
Large
</label>Depending on context a different size of checkbox may be needed.
:focus<div class="drop-menu">
<div class="dropdown">
<select class="dropdown__trigger">
<option value="Value1">Hermione Granger</option>
<option value="Value2">Harry Potter</option>
<option value="Value3">Ronald Weasley</option>
</select>
</div>
</div>This dropdown text pattern is primarily used in forms to make a selection. The button’s width is tied to the option with the longest character count.
<tk-single-select-list options='[{ "label": "Gryffindor", "value": "g" }, { "label": "Hufflepuff", "value": "h" }, { "label": "Slytherin", "value": "s" }, { "label": "Raven", "value": "r" }]' selected="g">
</tk-single-select-list>Radio Buttons are used to make a single selection on a group of items. The default state should always have an item selected.
<div class="radio-btn-group">
<label class="radio-btn-group__label">
<input class="input--hidden" type="radio" name="radio-group-name-here-1" checked="checked">
<span class="btn--inverse">Draco Malfoy</span>
</label>
<label class="radio-btn-group__label">
<input disabled class="input--hidden" type="radio" name="radio-group-name-here-1">
<span class="btn--inverse">Vincent Crabbe</span>
</label>
<label class="radio-btn-group__label">
<input class="input--hidden" type="radio" name="radio-group-name-here-1">
<span class="btn--inverse">Gregory Goyle</span>
</label>
</div>This pattern allows customers to toggle between multiple options to make a selection. The default state should always have an item selected. Only one item in the group can be selected at a time.
:focusradio buttons should share the same :name<tk-label>
Standard input
<tk-input/>
</tk-label>
<div class="m-2x"></div>
<tk-label>
Error input
<tk-input error/>
</tk-label>
<div class="m-2x"></div>
<tk-label disabled>
Disabled input
<tk-input disabled>
</tk-label>Text inputs are used to collect written information from customers. It has a range of options and supports several text formats including numbers, emojis and more.
Insight
Labels provide context to inputs and should be paired with inputs when applicable. Labels should wrap <input> when possible. This allows the label to be clickable, which helps customers interact with the input pattern.
<div class="study-title">
<label class="form__label form__label--stacked">
Ordinary Wizarding Level
<input
class="form-input t-xl study-title__input study-title__display mv-2x"
placeholder="Student's name, house"
value="Half-Blood Prince, Slytherin"
type="text"/>
</label>
<span class="study-title__workspace">Potions Exam</span>
</div>Input Titles are used to name things.
<tk-label>
Standard textarea
<tk-text-area></tk-text-area>
</tk-label>
<hr>
<tk-label>
Error texarea
<tk-text-area error></tk-text-area>
</tk-label>
<hr>
<tk-label disabled>
Disabled textarea
<tk-text-area disabled></tk-text-area>
</tk-label>Similar to input, textarea, collects written information but accommodates multiple lines of content. Textarea also comes with the ability to resize the height and width of the input based on the customer’s discretion.
Insight
Labels provide context to inputs and should be paired with inputs when applicable. Labels should wrap <input> when possible. This allows the label to be clickable, which helps customers interact with the input pattern.
:focus<tk-label>
Points for Gryffindor
<tk-input input-type="numeric" size="xs" step="1" min="0" value="0"/>
</tk-label>When a controlled number is to be used this pattern allows our customers to choose an exact number. They may use the up/down controls or type their preferred number in the input.
Insight
There is one size for the stepper pattern. Note: the stepper will look slightly different in Firefox.:focus<tk-label>Default Label</tk-label>
<tk-label disabled>Default Label (Disabled)</tk-label>
<tk-label size='large'>Large Label</tk-label>
<tk-label disabled size='large'>Large Label (Disabled)</tk-label>Labels provide context to inputs and should be paired with inputs when applicable. Labels should wrap <input> when possible. This allows the label to be clickable, which helps customers interact with the input pattern.
Insight
Disabled: When you have a disabled input or textarea pattern it should be paired with a disabled label for consistency.:focus