Design guidelines: Form and form control by kaylachumley · Pull Request #5047 · patternfly/patternfly-org

kaylachumley · 2026-06-30T20:51:07Z

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.

patternfly-build · 2026-06-30T20:56:09Z

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

cloudflare-workers-and-pages · 2026-07-09T23:06:38Z

Deploying patternfly-org with Cloudflare Pages

Latest commit:	`e7d23d5`
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

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.

andrew-ronaldson · 2026-07-15T14:55:50Z

+![Do and don't example showing a menu toggle with the pf-m-form modifier applied (square corners) versus without it (pill shape) in a form context.](./img/form-toggle-modifier.svg)
+</div>
+
+In the default PatternFly theme, form elements use `--pf-t--global--border--radius--control--form-element` (6px) border radius token. In the [Felt theme](/foundations-and-styles/theming#project-felt-theme), form elements, including input fields, menu toggles, and dropdowns, continue to use the same `--pf-t--global--border--radius--control--form-element` (6px) token, while other non-control components use `--pf-t--global--border--radius--control--default`. Using the `pf-m-form` class ensures that your form elements and menu toggle always match the border radius of the surrounding form fields, regardless of theme.


Thanks for this update @kaylachumley

andrew-ronaldson

Looks good to me but waiting on feedback about the react props.

mcoker

Left some comments, some are pretty nitpicky so feel free to pick and choose what you think is worth updating. Nothing here is blocking.

One thing though - it looks like this PR is adding a .png file for most/all of the SVGs - was that intended to be checked in? The images on the site are all still using the .svg - none of the markdown docs pages were updated to reference the new .png files.

mcoker · 2026-07-16T18:42:52Z

The alignment is a little off. There is a 4.5px top padding in the component

Is the padding off in the react component or off in the design guidelines image? I have no 4.5px top padding in figma. Trying to figure out which is correct? @mcoker @andrew-ronaldson

Oh sorry that top padding is present in the react component but not in the screenshot in this PR (from figma, I'm guessing?)

Sorry, I think I asked my question wrong! I know that the react has the top padding but i wasnt sure if the top padding is supposed to be there in general? Wondering if the figma implementation with no top padding is correct or if the top padding in the react component is the correct implementation and I need to update the figma component to match? @mcoker

Oh you asked correctly, I misread 😅 AFAIK the spacing hasn't changed, it's been like that for as far back as I remember. It's to better align the label with a text input/menu toggle (when the label is next to a box that has a border, top padding, and text in it). We have a variant for form labels that removes the top padding when the label is used with checkboxes or elements where the padding doesn't make as much sense - https://www.patternfly.org/components/forms/form#horizontal-stacked-no-padding-top

That said, the padding looked a lot better in PF5 - the label text was better aligned with the input text beside it.

Does make me wonder if we should update that either to remove the padding like in figma, or update the label padding so it centers better with the text in form inputs beside the label like it did in PF5. Forms are everywhere so it would have a fairly big impact if we changed it.

Ahh okay thanks for the background context! @andrew-ronaldson @lboehling thoughts?

@mcoker we can make a design issue to look at the alignment again. I'm okay merging this with that follow up in mind

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

…/checkbox/checkbox.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

…/form/forms.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

…/form-control/form-control.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

- Delete unreferenced PNG duplicates from checkbox, form-control, form, radio, and text-input img folders - Update general spacing token to --pf-t--global--spacer--gap--group-to-group--vertical--default - Update button spacing token to --pf-t--global--spacer--gap--action-to-action--default - Add xl spacer reference for form-to-button-group spacing - Rename section to "Menu toggles in a form" and update pf-m-form description to mention isForm prop

andrew-ronaldson

Will make a design follow up to look at the label inconsistencies from Figma and react

patternfly-build · 2026-07-22T17:29:18Z

Your changes have been released in:

@patternfly/ast-helpers@1.4.0-alpha.394
@patternfly/documentation-framework@6.49.2

Thanks for your contribution! 🎉

kaylachumley added 2 commits June 30, 2026 14:25

Add best practices section to form design guidelines

12db9ce

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.

Update form-control design guidelines with pf-m-form usage note

9b7e458

kaylachumley changed the title ~~Updat to Form and form control guidelines~~ Updat to Form and form control design guidelines Jun 30, 2026

kaylachumley requested review from andrew-ronaldson, bekah-stephens and lboehling June 30, 2026 20:59

kaylachumley changed the title ~~Updat to Form and form control design guidelines~~ Update to Form and form control design guidelines Jul 9, 2026

kaylachumley changed the title ~~Update to Form and form control design guidelines~~ Design guidelines: Form and form control Jul 9, 2026

andrew-ronaldson requested changes Jul 9, 2026

View reviewed changes

Comment thread packages/documentation-site/patternfly-docs/content/components/form/forms.md Outdated

Merge branch 'main' into form-guidelines

9a6ce88

kaylachumley added 2 commits July 10, 2026 13:26

Update design guidelines images and spacing token references

74a04ae

- 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)

Refine border radius token references in form best practices section

bb34d00

kaylachumley commented Jul 10, 2026

View reviewed changes

kaylachumley added 4 commits July 10, 2026 13:45

Fix blurry images by correcting file extensions from .svg to .png

998c931

Replace raster images with true SVGs for form design guidelines

5aa4338

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.

Update checkbox-nested.svg

1550763

Update SVG images for checkbox and form design guidelines

c22ca21

kaylachumley requested a review from andrew-ronaldson July 10, 2026 21:19

andrew-ronaldson reviewed Jul 15, 2026

View reviewed changes

Comment thread packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md Outdated

andrew-ronaldson reviewed Jul 15, 2026

View reviewed changes

mcoker requested a review from thatblindgeye July 16, 2026 18:15

mcoker reviewed Jul 16, 2026

View reviewed changes

thatblindgeye requested changes Jul 17, 2026

View reviewed changes

kaylachumley and others added 4 commits July 17, 2026 13:04

Update packages/documentation-site/patternfly-docs/content/components…

32a76a3

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

22d0307

…/checkbox/checkbox.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

ce1028b

…/form/forms.md Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

52cdab3

…/form-control/form-control.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

kaylachumley and others added 11 commits July 17, 2026 13:28

Update packages/documentation-site/patternfly-docs/content/components…

3611751

…/form-control/form-control.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

27d4219

…/form-control/form-control.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

1d08c95

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

02229c4

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

6dcbcd0

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Update packages/documentation-site/patternfly-docs/content/components…

9c58498

…/checkbox/checkbox.md Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into form-guidelines

294c4f2

Update form design guidelines SVG images

bef293e

Update form-spacing.svg

73c05d6

Update form-toggle-modifier.svg

e7d23d5

kaylachumley requested review from andrew-ronaldson, mcoker and thatblindgeye July 21, 2026 19:58

andrew-ronaldson approved these changes Jul 22, 2026

View reviewed changes

thatblindgeye approved these changes Jul 22, 2026

View reviewed changes

kaylachumley merged commit 8d3ce27 into main Jul 22, 2026
5 of 7 checks passed

Uh oh!

Conversation

kaylachumley commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

patternfly-build commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying patternfly-org with Cloudflare Pages

Uh oh!

kaylachumley left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

andrew-ronaldson Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

kaylachumley Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

kaylachumley Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kaylachumley Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

andrew-ronaldson Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andrew-ronaldson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jul 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

kaylachumley commented Jun 30, 2026 •

edited

Loading

patternfly-build commented Jun 30, 2026 •

edited

Loading

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

edited

Loading

kaylachumley left a comment •

edited

Loading

mcoker Jul 21, 2026 •

edited

Loading