Carbon Design System

A form is a group of related input controls that allows users to provide data or configure options.

Overview
Live demo
Formatting
Content
Behaviors
Additional guidance
Related
Feedback

Overview

The form component is configurable to fit various use cases and layouts. It is purposely simple out of the box, and users are responsible for configuring it to suit their needs. For in-depth design guidance on the different ways to configure and extend a form, see the form pattern.

Live demo

Theme selector

CodeSandbox React Angular Vue Web Components

Live editor for the Form component


  <Form>
  <Stack gap={7}>
    <TextInput
      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
      id="test2"
      invalidText="Invalid error message."
      labelText="Text input label"
      placeholder="Optional placeholder text"
    />
  <TextArea
    cols={50}
    helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
    id="test5"
    invalidText="Invalid error message."
    labelText="Text area label"
    placeholder="Optional placeholder text"
    rows={4}
  />
    <Select
      defaultValue="placeholder-item"
      id="select-1"
      invalidText="This is an invalid error message."
      labelText="Select"
    >
      <SelectItem
        text="Option 1"
        value="option-1"
      />
      <SelectItem
        text="Option 2"
        value="option-2"
      />
      <SelectItem
        text="Option 3"
        value="option-3"
      />
    </Select>
  <Button
    kind="primary"
    tabIndex={0}
    type="submit"
  >
    Submit
  </Button>
  </Stack>
</Form>