Examples
Props
FormSelect
Name | Type | Default | Description |
---|---|---|---|
childrenrequired | React.ReactNode | content rendered inside the FormSelect | |
aria-label | string | Custom flag to show that the FormSelect requires an associated id or aria-label. | |
className | string | '' | additional classes added to the FormSelect control |
isDisabled | boolean | false | Flag indicating the FormSelect is disabled |
isRequired | boolean | false | Sets the FormSelect required. |
onBlur | (event: React.FormEvent<HTMLSelectElement>) => void | (): any => undefined | Optional callback for updating when selection loses focus |
onChange | (event: React.FormEvent<HTMLSelectElement>, value: string) => void | (): any => undefined | Optional callback for updating when selection changes |
onFocus | (event: React.FormEvent<HTMLSelectElement>) => void | (): any => undefined | Optional callback for updating when selection gets focus |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
validated | 'success' | 'warning' | 'error' | 'default' | 'default' | Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state. |
value | any | '' | value of selected option |
FormSelectOption
Name | Type | Default | Description |
---|---|---|---|
labelrequired | string | the label for the option | |
className | string | '' | additional classes added to the Select Option |
isDisabled | boolean | false | flag indicating if the option is disabled |
isPlaceholder | boolean | false | flag indicating if option will have placeholder styling applied when selected * |
value | any | '' | the value for the option |
FormSelectOptionGroup
Name | Type | Default | Description |
---|---|---|---|
labelrequired | string | the label for the option | |
children | React.ReactNode | null | content rendered inside the Select Option Group |
className | string | '' | additional classes added to the Select Option |
isDisabled | boolean | false | flag indicating if the Option Group is disabled |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
.pf-v6-c-form-control | --pf-v6-c-form-control--ColumnGap | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--LineHeight | 1.5 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--Resize | none | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--OutlineOffset | -6px | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--BorderRadius | 6px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--before--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--before--BorderStyle | solid | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--before--BorderRadius | 6px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--after--BorderStyle | solid | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--after--BorderColor | transparent | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--after--BorderRadius | 6px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--BackgroundColor | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--Width | 100% | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--inset--base | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingBlockStart--base | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingBlockEnd--base | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingInlineEnd--base | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingInlineStart--base | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--input--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--select--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--hover--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--hover--after--BorderColor | (In light theme) #4394e5 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-success--hover--after--BorderColor | (In light theme) #204d00 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-warning--hover--after--BorderColor | (In light theme) #b98412 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-error--hover--after--BorderColor | (In light theme) #731f00 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-expanded--after--BorderWidth | 2px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-expanded--after--BorderColor | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-placeholder--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-placeholder--child--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-disabled--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-disabled--after--BorderColor | transparent | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--BorderColor | (In light theme) #e0e0e0 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--hover--after--BorderColor | revert | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor | transparent | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--m-plain--BorderColor | transparent | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--m-plain--inset--base | 0 | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset | 0 | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--icon--width | 0.875rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-success--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-success--after--BorderColor | (In light theme) #3d7317 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-success--PaddingInlineEnd | initial | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd | initial | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--m-success--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--m-success--PaddingInlineEnd | calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-warning--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-warning--after--BorderColor | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-warning--PaddingInlineEnd | initial | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd | initial | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd | calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-error--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-error--after--BorderColor | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-error--PaddingInlineEnd | initial | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd | initial | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-error--icon--width | 0.875rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__input--m-error--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__select--m-error--PaddingInlineEnd | calc(0.875rem + calc(1rem / 2) + 1rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-icon--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-icon--icon--width | 0.875rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-icon--icon--spacer | calc(1rem / 2) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd | calc(0.875rem + 1rem + 0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--textarea--Width | 100% | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--textarea--Height | auto | ||
.pf-v6-c-form-control | --pf-v6-c-form-control--textarea--PaddingBlockStart--offset | calc(-1 * -6px) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset | calc(-1 * -6px) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset | calc(-1 * -6px) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--textarea--PaddingInlineStart--offset | calc(-1 * -6px) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__icon--Color | (In light theme) #1f1f1f | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__icon--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__icon--m-status--Color | (In light theme) #1f1f1f | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-success__icon--m-status--Color | (In light theme) #3d7317 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-warning__icon--m-status--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-error__icon--m-status--Color | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--Gap | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart | calc(0.5rem - calc(-1 * -6px)) | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__toggle-icon--PaddingInlineStart | 0 | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd | 0 | ||
.pf-v6-c-form-control | --pf-v6-c-form-control__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control__toggle-icon--FontSize | 0.875rem | ||
| ||||
.pf-v6-c-form-control | --pf-v6-c-form-control--m-disabled__toggle-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-form-control:has(input) | --pf-v6-c-form-control--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control:has(input) | --pf-v6-c-form-control--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-form-control:has(input) | --pf-v6-c-form-control--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-form-control:has(input) | --pf-v6-c-form-control--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control:has(input) | --pf-v6-c-form-control__utilities--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control.pf-m-textarea.pf-m-success | --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset | calc(0.875rem + 0.5rem) | ||
| ||||
.pf-v6-c-form-control.pf-m-textarea:has(textarea) | --pf-v6-c-form-control--PaddingBlockStart | calc(0.5rem - calc(-1 * -6px)) | ||
| ||||
.pf-v6-c-form-control.pf-m-textarea:has(textarea) | --pf-v6-c-form-control--PaddingBlockEnd | calc(0.5rem - calc(-1 * -6px)) | ||
| ||||
.pf-v6-c-form-control.pf-m-textarea:has(textarea) | --pf-v6-c-form-control--PaddingInlineStart | calc(1rem - calc(-1 * -6px)) | ||
| ||||
.pf-v6-c-form-control.pf-m-textarea:has(textarea) | --pf-v6-c-form-control--PaddingInlineEnd | calc(1rem - calc(-1 * -6px) + calc(0.875rem + 0.5rem), 0px) | ||
| ||||
.pf-v6-c-form-control.pf-m-textarea:has(textarea) | --pf-v6-c-form-control__utilities--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly | --pf-v6-c-form-control--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly | --pf-v6-c-form-control--before--BorderColor | (In light theme) #e0e0e0 | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly:hover | --pf-v6-c-form-control--hover--after--BorderColor | revert | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) | --pf-v6-c-form-control--hover--after--BorderColor | revert | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--m-readonly--BackgroundColor | transparent | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--m-readonly--BorderColor | transparent | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--inset--base | 0 | ||
| ||||
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--before--BorderStyle | none | ||
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--after--BorderStyle | none | ||
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain | --pf-v6-c-form-control--OutlineOffset | 0 | ||
| ||||
.pf-v6-c-form-control.pf-m-expanded | --pf-v6-c-form-control--after--BorderColor | (In light theme) #0066cc | ||
| ||||
.pf-v6-c-form-control.pf-m-expanded | --pf-v6-c-form-control--after--BorderWidth | 2px | ||
| ||||
.pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
.pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--m-placeholder--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control__toggle-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--before--BorderStyle | none | ||
.pf-v6-c-form-control.pf-m-disabled | --pf-v6-c-form-control--after--BorderStyle | none | ||
.pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control--after--BorderColor | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control--hover--after--BorderColor | (In light theme) #731f00 | ||
| ||||
.pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control__icon--m-status--Color | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-form-control.pf-m-error | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control--after--BorderColor | (In light theme) #3d7317 | ||
| ||||
.pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control--hover--after--BorderColor | (In light theme) #204d00 | ||
| ||||
.pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control__icon--m-status--Color | (In light theme) #3d7317 | ||
| ||||
.pf-v6-c-form-control.pf-m-success | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control--after--BorderColor | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control--hover--after--BorderColor | (In light theme) #b98412 | ||
| ||||
.pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control__icon--m-status--Color | (In light theme) #dca614 | ||
| ||||
.pf-v6-c-form-control.pf-m-warning | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control:hover | --pf-v6-c-form-control--after--BorderColor | (In light theme) #4394e5 | ||
| ||||
.pf-v6-c-form-control:hover | --pf-v6-c-form-control--after--BorderWidth | 1px | ||
| ||||
.pf-v6-c-form-control.pf-m-icon | --pf-v6-c-form-control--PaddingInlineEnd | calc(0.875rem + 0.5rem + 1rem) | ||
| ||||
.pf-v6-c-form-control:has(select) | --pf-v6-c-form-control--PaddingBlockStart | 0.5rem | ||
| ||||
.pf-v6-c-form-control:has(select) | --pf-v6-c-form-control--PaddingBlockEnd | 0.5rem | ||
| ||||
.pf-v6-c-form-control:has(select) | --pf-v6-c-form-control--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-form-control:has(select) | --pf-v6-c-form-control--PaddingInlineEnd | calc(1rem + 0.875rem) | ||
| ||||
.pf-v6-c-form-control:has(select) | --pf-v6-c-form-control__utilities--PaddingInlineEnd | 1rem | ||
| ||||
.pf-v6-c-form-control.pf-m-placeholder > select | --pf-v6-c-form-control--Color | (In light theme) #4d4d4d | ||
| ||||
.pf-v6-c-form-control.pf-m-resize-vertical | --pf-v6-c-form-control--Resize | vertical | ||
.pf-v6-c-form-control.pf-m-resize-horizontal | --pf-v6-c-form-control--Resize | horizontal | ||
.pf-v6-c-form-control.pf-m-resize-both | --pf-v6-c-form-control--Resize | both | ||
.pf-v6-c-form-control__icon.pf-m-status | --pf-v6-c-form-control__icon--Color | (In light theme) #1f1f1f | ||
|