Skip to content

Design guidelines: Form and form control #5047

Open
kaylachumley wants to merge 9 commits into
mainfrom
form-guidelines
Open

Design guidelines: Form and form control #5047
kaylachumley wants to merge 9 commits into
mainfrom
form-guidelines

Conversation

@kaylachumley

@kaylachumley kaylachumley commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

closes #5052

Changes

  • Added a Best practices section to the form design guidelines with a "Menu toggles and dropdowns in a form" subsection documenting the pf-m-form modifier
  • Added pf-m-form usage note to the form-control design guidelines
  • Updated spacing references in the form design guidelines to use design tokens (--pf-t--global--spacer--lg, --pf-t--global--spacer--md)
  • Replaced design guidelines images for the form, form-control, checkbox, radio, and text-input components

Adds a new "Best practices" section with a "Menu toggles and dropdowns in a form" subsection, documenting the use of the pf-m-form modifier and its effect on border radius across themes. Includes a do/don't example image.
@kaylachumley kaylachumley changed the title Updat to Form and form control guidelines Updat to Form and form control design guidelines Jun 30, 2026
@patternfly-build

patternfly-build commented Jun 30, 2026

Copy link
Copy Markdown
Collaborator

Preview: https://pf-org--pr-5047-site.surge.sh

@kaylachumley kaylachumley changed the title Updat to Form and form control design guidelines Update to Form and form control design guidelines Jul 9, 2026
@kaylachumley kaylachumley changed the title Update to Form and form control design guidelines Design guidelines: Form and form control Jul 9, 2026
Comment thread packages/documentation-site/patternfly-docs/content/components/form/forms.md Outdated
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 9, 2026

Copy link
Copy Markdown

Deploying patternfly-org with  Cloudflare Pages  Cloudflare Pages

Latest commit: c22ca21
Status:🚫  Build failed.

View logs

- Replace design guidelines images for form, form-control, checkbox, radio, and text-input
- Update spacing references in form design guidelines to use token values (--pf-t--global--spacer--lg, --pf-t--global--spacer--md)

@kaylachumley kaylachumley left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updates all of the forms and form related design guidelines images

Swaps PNG placeholders for actual SVG files across form, form-control,
checkbox, radio, and text-input design guidelines to fix blurry images.
Updates markdown references to match new SVG filenames.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Design Guidelines for Form Control Elements (Square vs Pilled)

3 participants