Form control

Form control displays a labelled input and, optionally, associated validation text and/or hint text.

Import

import {FormControl} from '@primer/react'

Name	Default	Description
childrenRequired		`FormControl.Label \| FormControl.Caption \| FormControl.Validation \| Autocomplete \| TextInput \| TextInputWithTokens \| Select`
disabled	`false`	`boolean` Whether the control allows user input
id	`a generated string`	`string` The unique identifier for this control. Used to associate the label, validation text, and caption text
required	`false`	`boolean` If true, the user must specify a value for the input before the owning form can be submitted
sx		`SystemStyleObject`
ref		`React.RefObject<HTMLDivElement>`

Name	Default	Description
visuallyHidden	`false`	`boolean` Whether the label should be visually hidden
as	`'label'`	`'label' \| 'legend' \| 'span'` The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'
sx		`SystemStyleObject`

Name	Default	Description
children		`React.ReactNode` The content (usually just text) that is rendered to give contextual info about the field
sx		`SystemStyleObject`

Name	Default	Description
children		`React.ReactNode` The content (usually just text) that is rendered to give contextual info about the validation result for the field
variantRequired		`'error' \| 'success'` Changes the visual style to match the validation status
sx		`SystemStyleObject`

Name	Default	Description
children		`React.ReactNode` The visual to render before the choice input's label
sx		`SystemStyleObject`