diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md index 94521e3e50..978f74d9a7 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md @@ -10,13 +10,13 @@ import '../components.css'; Checkboxes allow users to choose **1 or more items** from a list of options.
-![Example of a form question with mutliple checkbox options stacked vertically.](./img/CB-usage-multi.svg) +![Example of a form question with mutliple checkbox options stacked vertically.](./img/checkbox-usage-multi.svg)
You can also use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button.
-![Example of a single checkbox.](./img/CB-usage-single.svg) +![Example of a single checkbox for a common "Remember me" option.](./img/checkbox-usage-single.svg)
### When to use @@ -29,16 +29,16 @@ You can also use a single checkbox to allow a user to enable or disable a featur Checkbox labels fall to the right of the checkbox control. If placed vertically, all checkbox controls should be aligned with the left edge of other controls or input fields, in the form or on the page. -You can use headings to label a group of checkboxes. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines). +You should provide a visible label to a group of checkboxes. The placement of the label will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines).
-![Example of a group of checkboxes.](./img/CB-alignment.svg) +![Example of a group of checkboxes with a label for the group.](./img/checkbox-alignment.svg)
-You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be enabled or disabled when the user selects or deselects a checkbox. +You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be shown or hidden when the user selects or deselects a checkbox.
-![Example of nested control checkboxes.](./img/CB-nested.svg) +![Example of nested control checkboxes.](./img/checkbox-nested.svg)
### When to use switches vs. checkboxes @@ -47,20 +47,20 @@ The main difference between a switch and a checkbox is that a switch changes an * Use checkboxes when the options do not save automatically and require the user to perform an additional action to save changes (in this case, pressing the “Save changes” button).
- ![Example 1 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-1.svg) + ![Example 1 of do's and don'ts for using a checkbox or a switch.](./img/checkbox-vs-switch-1.svg)
* Use a switch for situations where you are turning a series of one or more independent options on or off.
- ![Example 2 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-2.svg) + ![Example 2 of do's and don'ts for using a checkbox or a switch. On the left is the "do" example, a group of switches that correspond to various toggleable options like "Airplane mode", "Bluetooth", "Wi-fi", and "Cellular". On the right is the "don't" example, a group of checkboxes with the same options.](./img/checkbox-vs-switch-2.svg)
* Use checkboxes when you may have an indeterminate state where you can select all, none, or some actions.
- ![Example 3 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-3.svg) + ![Example 3 of do's and don'ts for using a checkbox or a switch. On the left is the "do" example, a group of nested checkboxes where the parent checkbox can have a "mixed" state where some of its children are checked and some unchecked. On the right is the "don't" example, a group of switches with the same nested behavior.](./img/checkbox-vs-switch-3.svg)
## Accessibility diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg deleted file mode 100644 index 9daa03b705..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-alignment.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg deleted file mode 100644 index 67bd5eab50..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-nested.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg deleted file mode 100644 index 0d3d8e5e68..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-multi.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg new file mode 100644 index 0000000000..4438b85520 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-alignment.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg new file mode 100644 index 0000000000..6160b07caa --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-nested.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg new file mode 100644 index 0000000000..181a1b03d1 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-multi.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg similarity index 95% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg index 440b667b5a..d3a3942708 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-usage-single.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-usage-single.svg @@ -1,6 +1,6 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg similarity index 90% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg index 72d155db3b..239d568701 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-1.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-1.svg @@ -1,74 +1,74 @@ - + - + - + - + - + - + - + - - - - + + + + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-2.svg similarity index 92% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-2.svg index 88a0a72e0c..30d754530b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-2.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-2.svg @@ -1,53 +1,53 @@ - + - + - - + + - + - - + + - - + + - + - - + + - + - + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.svg b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-3.svg similarity index 83% rename from packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.svg rename to packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-3.svg index bc2ca91333..6953ade202 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/img/CB-vs-switch-3.svg +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/img/checkbox-vs-switch-3.svg @@ -1,64 +1,64 @@ - + - + - + - + - + - + - + - + - + - - + + - - - + + + - - - + + + - - + + - - + + - - - + + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md b/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md index 0007cf5e9e..d3241c296a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/form-control.md @@ -11,11 +11,13 @@ Form control can be applied to various input components, including text boxes, d ## Usage While form controls are useful in providing feedback on user input, they don't need to be implemented for every input instance. Only use form controls when it is essential to convey information to the user. For example, if any string is valid for a text input, or any selection in a list is acceptable, form controls are not necessary. +Apply the `pf-m-form` modifier, either by applying the class or using the `isForm` prop for React, to all menu toggles used in a form. Read more on form controls in the [Form guidelines](/components/forms/form/design-guidelines). + ## Variations While form control styles differ slightly depending on the component, they all use some combination of underlines, color, and icons to give users **feedback** on their inputs and selections. For example, if a user types an invalid string into a text box, the box changes state to indicate the error.
-![Types of form controls.](./img/FC-variations.svg) +![Types of form controls grouped by input, selection, and text area. Each form control is numbered in the image to correspond to a text list of descriptions.](./img/form-control-variations.svg)
1. **Default component:** State of the input component before any form control is applied. @@ -30,14 +32,14 @@ Status controls are the most prominent form control. Error, warning, and success Use error controls when a user inputs incorrect information or selects an invalid option from a dropdown menu. Error indicators are often accompanied by helper text to further specify the user error. Read more on error messaging in the [forms guidelines](https://v4-archive.patternfly.org/v4/components/form/design-guidelines#errors-and-validation).
-![A gif showing an example of an input error.](./img/FC-errors.gif) +![An example if an input error. When a single letter "A" is entered into the "Name" field, an error helper text is rendered stating that the value must be at least 2 characters.](./img/errorcontrols.gif)
#### Success controls Use success controls to indicate valid user input for fields that require a specific form of input. In the example below, the name entered must be unique, so the success state indicates availability. Alternatively, an error control would be used to indicate a name that is already in use. **Only use success controls if the input must be validated.**
-![Example of a successful input.](./img/FC-success.svg) +![Example of a successful input, with a success variant helper text stating that the entered username is available.](./img/form-control-success.svg)
### Grey-out controls @@ -47,7 +49,7 @@ Input fields should be grayed out when the user cannot perform actions. Gray-out Disable controls indicate dependency and can be used to guide the user in a sequential workflow. In the example below, the field Target namespace is disabled, because the user must select a Target provider first. The component is disabled until the user makes the first selection, because namespace options are dependent on the selected provider. Disabled controls should be used over read only controls in scenarios where there is a way for a field to become enabled, for example, in the case of user access/permission restrictions.
-![Example of a disabled input.](./img/FC-disabled.svg) +![Example of a disabled input.](./img/form-control-disabled.svg)
#### Read only controls @@ -58,21 +60,21 @@ Use the read only state when an input will *never* be editable. This state diffe Use when you don't have the need to copy to clipboard.
-![Example of a plain read-only input with no icon.](./img/FC-read-only-plain.svg) +![Example of a plain read-only input with no icon.](./img/form-control-read-only-plain.svg)
#### Boxed variation Use when you have a need to copy to clipboard.
-![Example of a read-only icon with an icon.](./img/FC-read-only-boxed.svg) +![Example of a read-only icon with an icon.](./img/form-control-read-only-boxed.svg)
### Custom icons Icons can be included within form fields to indicate the type of input required. The most common example is the Search field, shown below. All icons should be right-aligned within the input component.
-![Example of a custom search input field.](./img/FC-custom-icons.svg) +![Example of a custom search input field.](./img/form-control-custom-icons.svg)
As a designer, you can choose to design input components with custom icons. Make sure that whatever icon you choose informs the user about the type of input that field requires. diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.svg deleted file mode 100644 index 225e8a159c..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-disabled.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif index 84005300cf..1bdffce9c6 100644 Binary files a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-errors.gif differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.svg deleted file mode 100644 index beb8a1c6a7..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-success.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/errorcontrols.gif b/packages/documentation-site/patternfly-docs/content/components/form-control/img/errorcontrols.gif new file mode 100644 index 0000000000..1bdffce9c6 Binary files /dev/null and b/packages/documentation-site/patternfly-docs/content/components/form-control/img/errorcontrols.gif differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-custom-icons.svg similarity index 65% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-custom-icons.svg index d9c0bdd342..d5babe606c 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-custom-icons.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-custom-icons.svg @@ -1,10 +1,16 @@ - - - + + + + + + - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-disabled.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-disabled.svg new file mode 100644 index 0000000000..063719a0de --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-disabled.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-boxed.svg similarity index 89% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-boxed.svg index b7ce1cec69..91d2610c47 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-boxed.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-boxed.svg @@ -4,7 +4,7 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg similarity index 99% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg index 83594e6cad..86404b4f50 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-read-only-plain.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-read-only-plain.svg @@ -4,6 +4,6 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg new file mode 100644 index 0000000000..1e62488d03 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-success.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg similarity index 85% rename from packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg rename to packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg index 651761763b..c4d5e4abac 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form-control/img/FC-variations.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form-control/img/form-control-variations.svg @@ -5,7 +5,7 @@ - + @@ -15,10 +15,10 @@ - + - - + + @@ -28,9 +28,9 @@ - - - + + + @@ -38,7 +38,7 @@ - + @@ -50,53 +50,59 @@ - + - + - - - + + + + + + - - - + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/forms.md b/packages/documentation-site/patternfly-docs/content/components/form/forms.md index cd56238f1e..094cb3cb38 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/forms.md +++ b/packages/documentation-site/patternfly-docs/content/components/form/forms.md @@ -313,7 +313,7 @@ To view an interactive example of field groups, see our [field groups demo](/com Forms may be placed in several contexts including on a page, in a wizard, or in a modal. Your chosen form placement may impact specific spacing considerations, but general form spacing requirements apply across these contexts. ### General spacing -Always add 24px of spacing underneath each form input. If a form input includes helper text, this 24px spacing should start below the helper text. Spacing between data inputs like checkboxes and radio buttons should also be 24px when on the same line or stacked on one another. For more spacing information, consult the [PatternFly spacer guidelines](/foundations-and-styles/spacers#considering-line-height-and-padding). +Add `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) of spacing between each form input group. If a form input includes helper text, this spacing should start below the helper text. Spacing between data inputs like checkboxes and radio buttons should also be `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) when on the same line or stacked on one another. Spacing between the end of a form and the start of the button action group should be `--pf-t--global--spacer--xl` (32px). For more spacing information, see the [PatternFly spacer guidelines](/foundations-and-styles/spacers#considering-line-height-and-padding).
![Example of a basic form with spacers to show how elements should be spaced within it.](./img/form-spacing.svg) @@ -322,7 +322,7 @@ Always add 24px of spacing underneath each form input. If a form input includes ### Button spacing -Place submit or cancel buttons on the bottom left of a form, left-aligned with all form fields. Buttons should be placed 16px apart in all contexts. Buttons for actions other than submitting or canceling the form may be placed elsewhere within a form depending on your use case. +Place submit or cancel buttons on the bottom left of a form, left-aligned with all form fields. Buttons should be spaced using `--pf-t--global--spacer--gap--action-to-action--default` (16px) in all contexts. Buttons for actions other than submitting or canceling the form may be placed elsewhere within a form depending on your use case. For more guidance on button placement, see our [button guidelines](/components/button/design-guidelines#button-placement). @@ -332,7 +332,7 @@ For more guidance on button placement, see our [button guidelines](/components/b ### Forms on a page -Left and top align a form within a page’s content area. A minimum of 24px padding should separate the form from neighboring elements. +Left and top align a form within a page’s content area. A minimum of `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) padding should separate the form from neighboring elements.
![Example of a form on a page.](./img/form-page-spacing.svg) @@ -348,7 +348,7 @@ To accommodate lengthy input fields, the maximum suggested width is 880px. Use y All input fields in your form will be the same length, except for in a [multi-column form](#multi-column-forms) where you may place two or more adjacent fields in a single line. In a multi-column form, form inputs will share available width on that line. ### Forms in a wizard -Similar to an in-page form, forms in wizards should be left-aligned in the content area and have a minimum of 24px padding separating its content from neighboring elements. +Similar to an in-page form, forms in wizards should be left-aligned in the content area and have a minimum of `--pf-t--global--spacer--gap--group-to-group--vertical--default` (24px) padding separating its content from neighboring elements. In a wizard, form error validation should occur when or by the time the user clicks the “Next” button. Don’t wait until the user has completed the whole wizard to notify them of possible errors and their location. @@ -357,7 +357,7 @@ In a wizard, form error validation should occur when or by the time the user cli
### Forms in a modal -Forms in a modal should be horizontally centered with the modal background and fill the modal width, leaving 24px between the form content and the modal background edges. +Forms in a modal should be horizontally centered with the modal background and fill the modal width, leaving `--pf-t--global--spacer--lg` (24px) between the form content and the modal background edges.
![Example of a form in a modal.](./img/form-modal.svg) @@ -468,6 +468,20 @@ Use button text to clearly and specifically communicate the action it triggers. For more button text guidance, see our [button content guidelines](/components/button/design-guidelines#content). +## Best practices + +To ensure your forms are consistent, maintainable, and adaptable across different themes, we recommend following these best practices. + +### Menu toggles in a form + +Apply the `pf-m-form` modifier, either by applying the class or using the `isForm` prop for React, to all [menu toggles](/components/menus/menu-toggle/html/#usage) used in a form. The `.pf-m-form` class modifies the menu toggle's border radius to match other form elements. + +
+![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) +
+ +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 toggles always match the border radius of the surrounding form fields, regardless of theme. + ## Accessibility This section highlights accessibility considerations to keep in mind when creating forms. For more accessibility guidance, see our [PatternFly accessibility guide](/accessibility/overview). diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg index 6d5d06b5a4..ddaed83ec0 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-spacing.svg @@ -1,57 +1,57 @@ - + - + - + - + - - - + + + - + - - - + + + - + - - - - - - + + + + + + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - + + + - - - - + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg index 0fb124537a..a4eba0dfae 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-button-validation.svg @@ -1,38 +1,38 @@ - + - + - - - + + + - - - + + + - - - - + + + + - - - + + + - - - - - - + + + + + + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg index 0a2686f642..24e5bc8b4f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-1.svg @@ -2,120 +2,132 @@ - + - + - + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - - - - + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg index fb387b3627..96cbc288fd 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-columns-rules-2.svg @@ -2,122 +2,126 @@ - + - + - + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - - - - - - - - + + + + + + + + + + - + - - - + + + - + - - - - + + + + - + - - + + @@ -125,7 +129,15 @@ - - - + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg index ddd380150c..dafb86d854 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-columns.svg @@ -6,9 +6,9 @@ - + - + @@ -17,9 +17,9 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg index fdf119d36c..1f902df8fb 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-horizontal.svg @@ -3,9 +3,9 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg index 4478f903c5..950c50ffd7 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-inputs.svg @@ -1,71 +1,76 @@ - - + + - + - - + + - + - + - + - + - + - + - + - + - + - + + + - - - - - - + + + + + + - + - + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg index e90587baf7..0f7caa6029 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-data-vertical.svg @@ -6,9 +6,9 @@ - + - + @@ -17,9 +17,9 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png deleted file mode 100644 index e4823f9594..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg index 207b5a0e08..5b5e3cc949 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-elements.svg @@ -1,46 +1,46 @@ - + - + - - - - + + + + - + - - - + + + - + - - - - - - + + + + + + - + - - - + + + - + - - - - - - - - - + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg index 340155eebf..5631cd3629 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-error-validation.svg @@ -5,68 +5,78 @@ - - - - + + + + - + - - - - - - - + + + + + + + - + - - - - - - - - + + + + + + + + - + - - - - - - + + + + + + + - + - - - - - - - - - - + + + + + + + + + + + - + - - - + + + - + - - - - - - + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg index f09c5129c4..5b2e236896 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-errors.svg @@ -1,29 +1,29 @@ - + - + - + - + - - - - - - - + + + + + + + - + - - - - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg index 7c87f429a8..35afd1557f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-helper-text.svg @@ -1,10 +1,10 @@ - + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg index 322ed5692f..3f7dc74e20 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-left-labels.svg @@ -1,10 +1,10 @@ - + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg index 78586f070e..055839fb21 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-modal.svg @@ -2,61 +2,61 @@ - - - - - - + + + + + + - + - - - - - + + + + + - + - - - - - + + + + + - + - - - + + + - + - - - + + + - + - - - + + + - + - - - - - - + + + + + + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg index c5c9323281..e9a632095c 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-multi-groups.svg @@ -4,33 +4,24 @@ - + - - - - - - - - - - - - + + + - - + + - - - + + + - + @@ -41,118 +32,133 @@ - + - + + + - - + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - + + + + + + - - - - - + + + + + - - - + + + - + - - + + - - - - + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - + + + + + - - - + + + - - + + - + - - + + - + - - + + @@ -173,5 +179,8 @@ + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg index be8eac6900..4029275051 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-page-spacing.svg @@ -4,33 +4,24 @@ - + - - - - - - - - - - - - + + + - - + + - - - + + + - + @@ -41,72 +32,82 @@ - + - + + + - - + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - + + + @@ -126,5 +127,8 @@ + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg index f9d1390467..f4055857bc 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-placeholders.svg @@ -1,24 +1,24 @@ - + - + - - - - + + + + - + - - - - + + + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg index ea03c49eb6..efcda898c2 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-popovers.svg @@ -1,24 +1,22 @@ - - - - - + + + - + - - - + + + - - - - + + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg index 17c32ad6ac..d28c043886 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-progressive-disclosure.svg @@ -3,22 +3,22 @@ - + - + - + - - - - + + + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg index de90bf6571..7aa20f2a71 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-field.svg @@ -1,11 +1,11 @@ - - + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg index 67fefb60c5..747ea8143e 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-required-message.svg @@ -1,77 +1,81 @@ - + + - - - + + + + - - - - - - + + + + + + + - - - - - + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - + + + + + + - - - + + + - - - - - - + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - - + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png deleted file mode 100644 index 0dd2413461..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg index 62525d8a22..289b62a701 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-sections.svg @@ -3,101 +3,108 @@ - + - - + + - + - - + + - + - - + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - + + + + - + - - - - - - + + + + + + + + - + - - - - + + + + - + - - - + + + - + - - - - - + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png deleted file mode 100644 index 391050042e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg index 625c9b2dac..d213378853 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-spacing.svg @@ -1,56 +1,51 @@ - - - - + + + - - - - - - + + + + + + - - - - - + + + + + - - - - - - - - + + + + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.svg new file mode 100644 index 0000000000..31c04bb5d6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-toggle-modifier.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg index 4a5c470f57..a5b8a3132a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-top-labels.svg @@ -1,10 +1,10 @@ - + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg b/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg index 747250f2df..dc126c047a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg +++ b/packages/documentation-site/patternfly-docs/content/components/form/img/form-wizard-spacing.svg @@ -5,105 +5,110 @@ - - + + - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - - - - + + - - - + + + - - - - - + + + + + + + + + - - - - + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - + - + - - + @@ -113,52 +118,54 @@ - + - - - + + + - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - + + + + + + + + + + + + - - - - - + + + + + - - - - + + + + - - + + - + @@ -172,7 +179,7 @@ - + @@ -193,13 +200,19 @@ - + - + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg index d4ef2ed186..a37726c206 100644 --- a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg +++ b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-nested.svg @@ -3,20 +3,20 @@ - + - + - + - - - - + + + + - + - - - + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg index ad51d745e8..db8b98697b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg +++ b/packages/documentation-site/patternfly-docs/content/components/radio/img/radio-usage.svg @@ -3,8 +3,8 @@ - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg index 0a4850cb41..6732697a37 100644 --- a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-elements.svg @@ -1,24 +1,24 @@ - + - + - - - - - - + + + + + + - + - - - - - - + + + + + + @@ -32,16 +32,16 @@ - - - - + + + + - - - + + + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg index 3536e98c54..694e799400 100644 --- a/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg +++ b/packages/documentation-site/patternfly-docs/content/components/text-input/img/text-input-errors.svg @@ -1,14 +1,14 @@ - - + + - + - - - - - - + + + + + +