<commit_before>---
layout: page
title:  Forms
category: Page components
redirect_from: "/ui-toolkit/form-fields.html"
---

- [General principles](#general-principles)
- [Text input fields](#text-input-fields)
- [Labels and helper text](#labels-and-helper-text)
- [Notifications](#notifications)
- [Checkboxes and radio buttons](#checkboxes-and-radio-buttons)
- [Dropdowns](#dropdowns)
- [Range sliders](#range-sliders)
{: class="toc"}

<!--Intro-->

<div class="content-50 content-first">


<div class="lead-in">
This page covers use cases, specs, accessibility, and responsive considerations for major form field UI components. 

In general, forms should be as simple and direct as possible to minimize scrolling (think mobile first). Keep your questions to a minimum and only ask what is absolutely needed. Make inputs as self-explanatory as possible, with a minimum of helper text.

Avoid the use of disabled fields where possible, and instead hide disabled fields until they become relevant and can be enabled.<commit_msg>Update form-fields.md<commit_after>---
layout: page
title:  Forms
category: Page components
redirect_from: "/ui-toolkit/form-fields.html"
---

- [General principles](#general-principles)
- [Text input fields](#text-input-fields)
- [Labels & helper text](#labels-and-helper-text)
- [Notifications](#notifications)
- [Checkboxes & radio buttons](#checkboxes-and-radio-buttons)
- [Dropdowns](#dropdowns)
- [Range sliders](#range-sliders)
{: class="toc"}

<!--Intro-->

<div class="content-50 content-first">


<div class="lead-in">
This page covers use cases, specs, accessibility, and responsive considerations for major form field UI components. 

In general, forms should be as simple and direct as possible to minimize scrolling (think mobile first). Keep your questions to a minimum and only ask what is absolutely needed. Make inputs as self-explanatory as possible, with a minimum of helper text.

Avoid the use of disabled fields where possible, and instead hide disabled fields until they become relevant and can be enabled.
{'fraction_non_alphanumeric': 0.11089494163424124, 'fraction_numerical': 0.0019455252918287938, 'mean_word_length': 4.945086705202312, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4986850', 'n_tokens_mistral': 581, 'n_tokens_neox': 542, 'n_words': 224}