Skip to main contentCarbon Design System

Form

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

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

<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>
TextInput
Modifiers
TextArea
Modifiers
Select
Modifiers