Skip to main content

FormControl

Wrapping component for form elements. Uses the <Stack> component for layout and spacing.

Examples

Form Control

Code
<FormControl>
  <InputLabel htmlFor="text-input">
    First Name
  </InputLabel>
  <TextInput
    id="text-input"
    name="text-input"
    type="text"
  />
</FormControl>

Message

Additional context can be provided alongside a form field using the <FormControlMessage> component.

e.g. 978-0-12-409542-7

Code
<FormControl>
  <InputLabel htmlFor="isbn">
    ISBN
  </InputLabel>
  <TextInput
    id="isbn"
    name="isbn"
    type="text"
  />
  <FormControlMessage>
    e.g. 978-0-12-409542-7
  </FormControlMessage>
</FormControl>

Error

The <FormControlError> component allows an error with the field to be communicated to the user.

Code
<FormControl>
  <InputLabel htmlFor="email">
    Email
  </InputLabel>
  <TextInput
    aria-describedby="error"
    defaultValue="invalid-email-address"
    id="email"
    invalid
    name="email"
    type="email"
  />
  <FormControlError id="error">
    Please provide a valid email address
  </FormControlError>
</FormControl>

Error with select

The <FormControlError> component allows an error with the field to be communicated to the user.

Code
<FormControl>
  <InputLabel htmlFor="country">
    Country
  </InputLabel>
  <Select
    aria-describedby="country_error"
    id="country"
    invalid
  >
    <SelectOption
      id="1-1"
      value="1"
    >
      Country 1
    </SelectOption>
    <SelectOption
      id="1-2"
      value="2"
    >
      Country 2
    </SelectOption>
  </Select>
  <FormControlError id="country_error">
    Please provide a valid country
  </FormControlError>
</FormControl>

Success

The <FormControlSuccess> component allows a success to be communicated to the user.

Success: Valid city added
Code
<FormControl>
  <InputLabel htmlFor="city">
    City
  </InputLabel>
  <TextInput
    aria-describedby="success"
    defaultValue="success-city"
    id="city"
    name="city"
    success
    type="text"
  />
  <FormControlSuccess id="success">
    Valid city added
  </FormControlSuccess>
</FormControl>

Stand alone form

The <FormControlButton> component indicates a standalone form with one value to be submitted.

Code
<form onSubmit={function noRefCheck() {}}>
  <FormControl>
    <InputLabel htmlFor="signup">
      Sign-up
    </InputLabel>
    <TextInput
      id="signup"
      name="signup"
      onChange={function noRefCheck() {}}
      type="text"
      value=""
    />
    <FormControlButton type="submit">
      Submit
    </FormControlButton>
  </FormControl>
</form>

Stand alone form with select

The <FormControlButton> component can be used with select and indicates a standalone form with one value to be submitted.

Success: Subscribed successfully
Code
<form>
  <FormControl>
    <InputLabel htmlFor="subscribe">
      Sign-up
    </InputLabel>
    <Select
      aria-describedby="select-success"
      id="subscribe"
      success
    >
      <SelectOption
        id="1-1"
        value="1"
      >
        Option 1
      </SelectOption>
      <SelectOption
        id="1-2"
        value="2"
      >
        Option 2
      </SelectOption>
    </Select>
    <FormControlSuccess id="select-success">
      Subscribed successfully
    </FormControlSuccess>
    <FormControlButton type="submit">
      Submit
    </FormControlButton>
  </FormControl>
</form>

Props

FormControl

className

string

The className property sets the value of the class attribute of the element.

FormControlError

id

string

FormControlSuccess

id

string

FormControlButton

block

boolean

If set to `false` component renders with `width : auto`, otherwise `width : full`.

icon

ReactNode

loading

boolean

If set to `true`, disables the button and shows a `Spinner` component in place of the child content.

variant

"text" | "icon" | "textSecondary"

iconPosition

"end" | "start"

FormControlMessage