-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
**TBD!** A field is a form element when user input is needed. It is typically used with other form elements in a fieldset. | ||
|
||
![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4) | ||
|
||
1. Label | ||
2. Form component | ||
3. Hint or feedback text | ||
4. Mandatory indicator | ||
5. Counter (input and textarea field only) | ||
|
||
Here only the default field is described. For the custom field see more details in layouts chapter | ||
|
||
## Options | ||
- **Label:** Add a label for the field that provides context to your users. | ||
- **Mandatory:** The asterisk states whether user input is required on the field before submitting the form. | ||
- **Field:** Use the appropriate field depending on the type of input data, e.g. [text input](../input.md), [checkbox](../checkbox.md) or [toggle switch](../toogle.md). | ||
- **Hint text:** Provide additional information or context about the field. Display the message directly below the input field. | ||
- **Feedback message or tooltip:** Display validation feedback directly below the input field or as tooltip when users hover over the form field or the field is focused. | ||
- **Hint or feedback copy:** Use a different copy for hints to provide additional information or context about the field, and the individual validation states that apply (see [validation](forms-validation.md)). | ||
- **Counter:** Display the number of characters entered in the field. | ||
|
||
## Behavior in context | ||
- **Interaction:** see [validation](forms-validation.md) | ||
- **Behavior of a field as part of a form:** see [behavior](forms-validation) | ||
- **Label and message text overflow:** Labels, feedback and hint texts are not truncated but will break into multiple lines if needed. | ||
|
||
## States | ||
Interaction states: Default, hover, active, disabled, readonly, focus. If a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered in specific validation states. | ||
|
||
Validation states: Default, valid, info, warning, invalid (see [validation](forms-validation.md)). | ||
|
||
![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2767-5681&t=IIgjTqoOEP524yAH-4) | ||
|
||
## Dos and Don’ts | ||
- Do use a label for every field. | ||
- Do use a counter for fields with a character limit. | ||
- Do use hint text to provide additional information or context about the field. | ||
- Don’t use placeholder text or hint text as a replacement for labels. | ||
|
||
## Related patterns | ||
- [Validation](forms-validation.md) | ||
- [Behavior](forms-behavior.md) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
A field is a form element when user input is needed. It is typically used with other form elements in a fieldset. | ||
|
||
![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4) | ||
|
||
1. Label | ||
2. Form component | ||
3. Hint or feedback text | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. |
||
4. Mandatory indicator | ||
5. Counter (input and textarea field only) | ||
|
||
**Note:** In this chapter, we focus exclusively on describing the default field component. For details about custom fields, please refer to the [layouts](forms-layouts.md) chapter. | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
|
||
## Options | ||
- **Label:** Add a label for the field that provides context to your users. | ||
- **Mandatory:** The asterisk states whether user input is required on the field before submitting the form. | ||
- **Field:** Use the appropriate field depending on the type of input data, e.g. [text input](../input.md), [checkbox](../checkbox.md) or [toggle switch](../toogle.md). | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
- **Hint text:** Provide additional information or context about the field. Display the message directly below the input field. | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
- **Feedback message or tooltip:** Display validation feedback directly below the input field or as tooltip when users hover over the form field or the field is focused. | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
- **Hint or feedback copy:** Use a different copy for hints to provide additional information or context about the field, and the individual validation states that apply (see [validation](forms-validation.md)). | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
kathrinschalber
Author
Collaborator
|
||
- **Counter:** Display the number of characters entered in the field. | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
|
||
## Behavior in context | ||
- **Interaction:** see [validation](forms-validation.md) | ||
- **Behavior of a field as part of a form:** see [behavior](forms-validation) | ||
- **Label and message text overflow:** Labels, feedback and hint texts are not truncated but will break into multiple lines if needed. | ||
This comment has been minimized.
Sorry, something went wrong. |
||
|
||
## States | ||
Interaction states: Default, hover, active, disabled, readonly, focus. If a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered in specific validation states. | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
|
||
Validation states: Default, valid, info, warning, invalid (see [validation](forms-validation.md)). | ||
|
||
![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-12426&t=pKzFQBhaXmjTsR8P-4) | ||
|
||
## Dos and Don’ts | ||
- Do use a label for every field | ||
- Do use a counter for fields with a character limit | ||
- Do use hint text to provide additional information or context about the field | ||
- Don’t use placeholder text or hint text as a replacement for labels | ||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
|
||
This comment has been minimized.
Sorry, something went wrong.
bettiifr
Collaborator
|
||
## Related patterns | ||
- [Validation](forms-validation.md) | ||
- [Behavior](forms-behavior.md) | ||
- [Input](input.md) | ||
- [Textarea](textarea.md) | ||
- [Select](select.md) | ||
- [Checkbox](checkbox.md) | ||
- [Radio button](radio-button.md) | ||
- [Toggle switch](toogle.md) | ||
- [Upload](upload.md) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
**TBD**! A field is a form element when user input is needed. It is typically used with other form elements in a fieldset. | ||
|
||
![Field](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2781-323&t=pKzFQBhaXmjTsR8P-4) | ||
|
||
1. Label | ||
2. Form component | ||
3. Hint or feedback text | ||
4. Mandatory indicator | ||
5. Counter (input and textarea field only) | ||
|
||
**Note:** In this chapter, we focus exclusively on describing the default field component. For details about custom fields, please refer to the [layouts](forms-layouts.md) chapter. | ||
|
||
## Options | ||
- **Label:** Add a label for the field that provides context to your users. | ||
- **Mandatory:** The asterisk states whether user input is required on the field before submitting the form. | ||
- **Field:** Use the appropriate field depending on the type of input data, e.g. [text input](../input.md), [checkbox](../checkbox.md) or [toggle switch](../toogle.md). | ||
- **Hint text:** Provide additional information or context about the field. Display the message directly below the input field. | ||
- **Feedback message or tooltip:** Display validation feedback directly below the input field or as tooltip when users hover over the form field or the field is focused. | ||
- **Hint or feedback copy:** Use a different copy for hints to provide additional information or context about the field, and the individual validation states that apply (see [validation](forms-validation.md)). | ||
- **Counter:** Display the number of characters entered in the field. | ||
|
||
## Behavior in context | ||
- **Interaction:** see [validation](forms-validation.md) | ||
- **Behavior of a field as part of a form:** see [behavior](forms-validation) | ||
- **Label and message text overflow:** Labels, feedback and hint texts are not truncated but will break into multiple lines if needed. | ||
|
||
## States | ||
Interaction states: Default, hover, active, disabled, readonly, focus. If a feedback tooltip is chosen over a message, the field shows a tooltip when in focus or hovered in specific validation states. | ||
|
||
Validation states: Default, valid, info, warning, invalid (see [validation](forms-validation.md)). | ||
|
||
![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=2767-5681&t=IIgjTqoOEP524yAH-4) | ||
|
||
## Dos and Don’ts | ||
- Do use a label for every field | ||
- Do use a counter for fields with a character limit | ||
- Do use hint text to provide additional information or context about the field | ||
- Don’t use placeholder text or hint text as a replacement for labels | ||
|
||
## Related patterns | ||
- [Validation](forms-validation.md) | ||
- [Behavior](forms-behavior.md) | ||
- [Input](input.md) | ||
- [Textarea](textarea.md) | ||
- [Select](select.md) | ||
- [Checkbox](checkbox.md) | ||
- [Radio button](radio-button.md) | ||
- [Toggle switch](toogle.md) | ||
- [Upload](upload.md) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
title: Behavior | ||
--- | ||
R | ||
import DocsTabs from '@site/src/components/DocsTabs'; | ||
|
||
import DocsUx from './\_forms-behavior_styleguide.md'; | ||
%% import DocsCode from './\_forms-behavior_code.md'; %% | ||
|
||
# Behavior | ||
|
||
<DocsTabs styleguide={DocsUx} code={DocsCode} /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
title: Field | ||
--- | ||
|
||
import DocsTabs from '@site/src/components/DocsTabs'; | ||
|
||
import DocsUx from './\_forms-field_styleguide.md'; | ||
%% import DocsCode from './\_forms-field_code.md'; %% | ||
|
||
# Field | ||
|
||
<DocsTabs styleguide={DocsUx} code={DocsCode} /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
title: Layout | ||
--- | ||
|
||
import DocsTabs from '@site/src/components/DocsTabs'; | ||
|
||
import DocsUx from './\_forms-layout_styleguide.md'; | ||
%% import DocsCode from './\_forms-layout_code.md'; %% | ||
|
||
# Layout | ||
|
||
<DocsTabs styleguide={DocsUx} code={DocsCode} /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
title: Validation | ||
--- | ||
|
||
import DocsTabs from '@site/src/components/DocsTabs'; | ||
|
||
import DocsUx from './\_forms-validation_styleguide.md'; | ||
%% import DocsCode from './\_forms-validation_code.md'; %% | ||
|
||
# Validation | ||
|
||
<DocsTabs styleguide={DocsUx} code={DocsCode} /> |
We have to think about whether to call it hint or help text, because in figma we called it help text and here we call it hint