Skip to main content

FormControl

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

Examples

Form Control

Code
<UnknownElementType>
  <UnknownElementType htmlFor="text-input">
    First Name
  </UnknownElementType>
  <UnknownElementType
    id="text-input"
    name="text-input"
    type="text"
  />
</UnknownElementType>

Message

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

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

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

Error

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

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

Error with select

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

Code
<UnknownElementType>
  <UnknownElementType htmlFor="country">
    Country
  </UnknownElementType>
  <UnknownElementType
    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>
  </UnknownElementType>
  <FormControlError id="country_error">
    Please provide a valid country
  </FormControlError>
</UnknownElementType>

Success

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

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

Stand alone form

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

Code
<form onSubmit={function noRefCheck() {}}>
  <UnknownElementType>
    <UnknownElementType htmlFor="signup">
      Sign-up
    </UnknownElementType>
    <UnknownElementType
      id="signup"
      name="signup"
      onChange={function noRefCheck() {}}
      type="text"
      value=""
    />
    <UnknownElementType type="submit">
      Submit
    </UnknownElementType>
  </UnknownElementType>
</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>
  <UnknownElementType>
    <UnknownElementType htmlFor="subscribe">
      Sign-up
    </UnknownElementType>
    <UnknownElementType
      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>
    </UnknownElementType>
    <FormControlSuccess id="select-success">
      Subscribed successfully
    </FormControlSuccess>
    <UnknownElementType type="submit">
      Submit
    </UnknownElementType>
  </UnknownElementType>
</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

variant

"text" | "icon" | "textSecondary" | "textTertiary"

loading

boolean

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

iconPosition

"end" | "start"

FormControlMessage