Skip to content

fix(form): fix pattern links #4322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 12, 2025
Merged

fix(form): fix pattern links #4322

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
910c836
fix(form): fix pattern links
PixeledCode May 5, 2025
b8a21ef
fix(form): update links
PixeledCode May 8, 2025
8bd7022
Merge branch 'main' into fix-form-pattern-links
kodiakhq[bot] May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions packages/paste-website/src/pages/patterns/form/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ import {
import {UnorderedList, OrderedList, ListItem} from '@twilio-paste/list'
import {Table, THead, Tr, Th, TBody, Td, TFoot} from '@twilio-paste/table';
import { Blockquote, BlockquoteContent, BlockquoteCitation } from "@twilio-paste/blockquote";
import {InlineCode} from '@twilio-paste/inline-code';

import DefaultLayout from '../../../layouts/DefaultLayout';
import {getFeature, getNavigationData} from '../../../utils/api';
Expand Down Expand Up @@ -166,7 +167,7 @@ Before designing a form you should:
<UnorderedList>
<ListItem>Don't ask for the same information twice in the same session. Reference: <Anchor href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry">WCAG</Anchor></ListItem>
<ListItem>Provide accessible error identification and messaging. Reference: <Anchor href="https://www.w3.org/WAI/WCAG22/Understanding/error-identification">WCAG</Anchor></ListItem>
<ListItem>Group related fields using fieldsets and legends with `FormSection` and `FormSectionHeading` from the <Anchor href="/components/form">Form layout component</Anchor>, which render an HTML fieldset and legend. Reference: <Anchor href="https://webaim.org/techniques/forms/controls">WebAIM</Anchor></ListItem>
<ListItem>Group related fields using fieldsets and legends with <InlineCode>FormSection</InlineCode> and <InlineCode>FormSectionHeading</InlineCode> from the <Anchor href="/components/form-layout">Form layout component</Anchor>, which render an HTML fieldset and legend. Reference: <Anchor href="https://webaim.org/techniques/forms/controls">WebAIM</Anchor></ListItem>
<ListItem>The order in which form elements are presented on a webpage should be logical and meaningful. Reference: <Anchor href="https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html">WCAG</Anchor></ListItem>
</UnorderedList>

Expand All @@ -184,7 +185,7 @@ The different parts of a form are:

<UnorderedList>
<ListItem>
<strong><Anchor href="/components/form">Form layout component</Anchor></strong>: A wrapper layout component that sets layout and spacing between form elements.
<strong><Anchor href="/components/form-layout">Form layout component</Anchor></strong>: A wrapper layout component that sets layout and spacing between form elements.
</ListItem>
<ListItem>
<strong>Form element</strong>: Any UI component in a form. Examples: <Anchor href="/components/input">Input</Anchor>, <Anchor href="/components/button">Button</Anchor>, <Anchor href="/components/callout">Callout</Anchor>.
Expand Down Expand Up @@ -214,7 +215,7 @@ The different parts of a form are:
</THead>
<TBody>
<Tr verticalAlign="top">
<Td><Anchor href="/components/form">Form layout</Anchor></Td>
<Td><Anchor href="/components/form-layout">Form layout</Anchor></Td>
<Td>Arranges a layout of form elements with preset spacing.</Td>
</Tr>
<Tr verticalAlign="top">
Expand Down Expand Up @@ -382,7 +383,7 @@ Use single-step forms for:
Tasks that users can complete in one go without interruptions or needing external references.
</ListItem>
<ListItem>
Low cognitive load forms that require a maximum of 8 fields. For longer forms, use a <Anchor href="https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.yi4naptd6s8d">Multi-step</Anchor> form or for settings, use the <Anchor href="/page-templates/settings">Settings</Anchor> template and divide the fields with In Page Navigation or Tabs.
Low cognitive load forms that require a maximum of 8 fields. For longer forms, use a <Anchor href="#multi-step-forms">Multi-step</Anchor> form or for settings, use the <Anchor href="/page-templates/settings">Settings</Anchor> template and divide the fields with In Page Navigation or Tabs.
</ListItem>
</UnorderedList>

Expand Down Expand Up @@ -659,7 +660,7 @@ Inline forms use our [Popover](/components/popover) component. Use Inline forms
## Composition

Designing a good form requires making decisions about composition, sequence, form elements, copy, and feedback.
Use the [Form layout component](/components/form) to arrange a layout of form elements with preset spacing.
Use the [Form layout component](/components/form-layout) to arrange a layout of form elements with preset spacing.

### Number of form elements

Expand Down Expand Up @@ -705,7 +706,7 @@ When ordering your form, place fields in a logical order from a user’s perspec

#### Organization: When to break into sections or new pages

After determining the number of form fields, decide how to group them into sections, using `FormSection` from the [Form layout component](/components/form). If a form naturally breaks down into short sections, a [single step form](https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.3vpocpbk0gl7) is likely to be a good way to organize the form. When a form becomes long and has more than 8 questions that are only related by a few topics, [multi-step form](https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.yi4naptd6s8d) would be a better way to organize the form.
After determining the number of form fields, decide how to group them into sections, using `FormSection` from the [Form layout component](/components/form-layout). If a form naturally breaks down into short sections, a [single step form](#single-step-or-page-forms) is likely to be a good way to organize the form. When a form becomes long and has more than 8 questions that are only related by a few topics, [multi-step form](#multi-step-forms) would be a better way to organize the form.

### Form field composition

Expand Down Expand Up @@ -818,10 +819,10 @@ The primary Button placement depends on the form type:

<UnorderedList>
<ListItem>
For <Anchor href="https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.3vpocpbk0gl7">Single Step Forms</Anchor>, <Anchor href="/components/side-modal">Side Modals</Anchor>, <Anchor href="/components/side-panel">Side Panels</Anchor>, <Anchor href="/components/minimizable-dialog">Minimizable Dialogs</Anchor> and <Anchor href="https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.7xhk5supgjav">Popover</Anchor> forms, keep the primary button left-aligned, and placed before secondary buttons for better scannability of the content and its related actions.
For <Anchor href="#single-step-or-page-forms">Single Step Forms</Anchor>, <Anchor href="/components/side-modal">Side Modals</Anchor>, <Anchor href="/components/side-panel">Side Panels</Anchor>, <Anchor href="/components/minimizable-dialog">Minimizable Dialogs</Anchor> and <Anchor href="#inline-forms">Popover</Anchor> forms, keep the primary button left-aligned, and placed before secondary buttons for better scannability of the content and its related actions.
</ListItem>
<ListItem>
For <Anchor href="https://docs.google.com/document/d/1sYcP_i_YTwYWWdjKDQfkIdMj1NqyZV5c_8k4BxrEYc0/edit?pli=1&tab=t.0#heading=h.yi4naptd6s8d">Multi-step Forms</Anchor> and <Anchor href="/page-templates/wizard">Wizards</Anchor>, keep the primary button right-aligned, placed after secondary buttons to indicate the direction of the form. Refer to our <Anchor href="/page-templates/wizard#actions-footer">Wizards action footer</Anchor> guidelines for additional guidance.
For <Anchor href="#multi-step-forms">Multi-step Forms</Anchor> and <Anchor href="/page-templates/wizard">Wizards</Anchor>, keep the primary button right-aligned, placed after secondary buttons to indicate the direction of the form. Refer to our <Anchor href="/page-templates/wizard#actions-footer">Wizards action footer</Anchor> guidelines for additional guidance.
</ListItem>
</UnorderedList>

Expand Down
Loading