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

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>;