All Downloads are FREE. Search and download functionalities are using the official Maven repository.

package.docs.components.Form.examples.Form.md Maven / Gradle / Ivy

The newest version!
---
id: Form
section: components
subsection: forms
cssPrefix: pf-v6-c-form
---## Examples

### Vertically aligned labels

```html
 
``` ### Horizontally aligned labels ```html
 
Label (no top padding) 
``` ### Horizontal layout at a custom breakpoint ```html
 
``` ### Form sections ```html
``` ### Help text ```html
This is helper text.
This is helper text for a warning input.
This is helper text for an invalid input.
This is helper text for success input.
This is helper text with an icon.
``` ### Label with additional info ```html
 
More info about the name field
``` ### Label with additional info (horizontal form) ```html
 
More info about the name field
``` ### Action group ```html
``` ### Field group (non-expandable) ```html
Field group Title
Field group description text
``` ### Expandable and nested field groups ```html
Field group 1
Field group 1 description text
Field group 2
Field group 2 description text
 
 
Nested field group 3
 
 
``` ## Documentation To avoid the form label's required indicator or help tooltip icon from wrapping separately from the form label text, all whitespace characters between the last word of the label text, the required indicator (`.pf-v6-c-form__label-required`), and help tooltip icon (`.pf-v6-c-form__label-help`) must be removed, and ` ` characters added in between to maintain spacing. Also the help tooltip icon's `.pf-v6-c-form__label-required` element must be a `` instead of a `