Form Control

Form Control provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements

    SourceTheme source@chakra-ui/form-control

Props#

colorScheme

Description

Color Schemes for FormControl are not implemented in the default theme. You can extend the theme to implement them.

Type
(string & {})

isDisabled

Description

If true, the form control will be disabled. This has 2 side effects: - The FormLabel will have `data-disabled` attribute - The form element (e.g, Input) will be disabled

Type
boolean

isInvalid

Description

If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true

Type
boolean

isReadOnly

Description

If true, the form control will be readonly

Type
boolean

isRequired

Description

If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true

Type
boolean

label

Description

The label text used to inform users as to what information is requested for a text field.

Type
string

size

Description

Sizes for FormControl are not implemented in the default theme. You can extend the theme to implement them.

Type
string

variant

Description

Variants for FormControl are not implemented in the default theme. You can extend the theme to implement them.

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel