Skip to main contentCarbon Design System

Form

Preview the form component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

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="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="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
SelectItem
Modifiers