Form

Form is not a traditional Camp component. It contains shared elements that need to be used across multiple form components (e.g., labels, helper text and fieldset). It is available to anyone as it is useful for bringing Camp consistency to forms.

Resources

Install

yarn add @camp/form

Props

Fieldset

Generated from @camp/form@8.14.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Label

Generated from @camp/form@8.14.0 source, ordered by production usage. * required.

HelperText

Generated from @camp/form@8.14.0 source, ordered by production usage. * required. † standard HTML attribute — all native attributes are supported; only those with production usage are listed.

Existing Components

The following components are currently available in the Form component.

Label

This element provides the Camp styling for a label element.

import { Label } from '@camp/form';
 
<Label>Name</Label>;

Required Prop

This prop provides the Camp styling for a required label element.

import { Label } from '@camp/form';
 
<Label required>Name</Label>;

Label as other element

By default, the label element is rendered as a <label> element. However, you can use the as prop to render it as a different element. It currently supports the same as our Camp <Text /> body style ('p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label').

import { Label } from '@camp/form';
 
<Label as="h3">This is a label</Label>;

Helper Text

This element provides the Camp styling for helper text.

import { HelperText } from '@camp/form';
 
<HelperText>This is the formatting for helper text.</HelperText>;

Error Helper Text

This helper text is often used to provide error messages. Add the error prop to style it as error text.

import { HelperText } from '@camp/form';
 
<HelperText error>This is the formatting for helper text.</HelperText>;

Helper Text as other element

By default, the helper text is rendered as a <span> element. However, you can use the as prop to render it as a different element. It currently supports the same as our Camp <Text /> body style ('p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label').

import { HelperText } from '@camp/form';
 
<HelperText as="h3">This is the formatting for helper text.</HelperText>;

Fieldset

This element provides the Camp styling for a fieldset element.

import { Fieldset, Label, HelperText } from '@camp/form';
import { Text } from '@camp/text';
 
<Fieldset>
  <Label required>Fieldset Label</Label>
  <Text type="body">Fieldset content</Text>
  <HelperText>Fieldset helper text</HelperText>
</Fieldset>;

Production Examples

More states from @camp/form's visual test stories, ranked by production usage. Variations already documented above are not repeated here.

Helper Text Default

import { HelperText } from '@camp/form';
 
<HelperText>Please make a selection before continuing.</HelperText>

Helper Text Error

import { HelperText } from '@camp/form';
 
const defaultArgs = {
  children: 'Please make a selection before continuing.',
};
 
<HelperText {...defaultArgs} invalid />

Helper Text Error Themed

import { HelperText } from '@camp/form';
 
const defaultArgs = {
  children: 'Please make a selection before continuing.',
};
 
<HelperText {...defaultArgs} invalid themed />

Helper Text Themed

import { HelperText } from '@camp/form';
 
const defaultArgs = {
  children: 'Please make a selection before continuing.',
};
 
<HelperText {...defaultArgs} themed />

Label Default

import { Label } from '@camp/form';
 
<Label>This is a label</Label>

Label Required

import { Label } from '@camp/form';
 
const defaultArgs = {
  children: 'This is a label',
};
 
<Label {...defaultArgs} required />