Field

View Source

Composes InputLabel and passes an id to the first child to pair labels and controls automatically.

First Name

Select at least one choice, Name cannot be blank

First Name

Last Name

render(
  <StackView width={60} spacing={4}>
    <Field inline label="First Name" helpContent="What's my name again?">
      <Input />
    </Field>

    <Field
      state="error"
      feedbackText="Select at least one choice, Name cannot be blank"
    >
      <Select state="error">
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
      </Select>
      <Input placeholder="Name" state="error" />
    </Field>

    <FieldSet margin={0}>
      <Field label="First Name">
        <Input />
      </Field>

      <Field label="Last Name" helpContent="Where to find your last name.">
        <Input />
      </Field>
    </FieldSet>
  </StackView>
)

render(
  <StackView width={60} spacing={4}>
    <Field inline label="First Name" helpContent="What's my name again?">
      <Input />
    </Field>
    <Field
      state="error"
      feedbackText="Select at least one choice, Name cannot be blank"
    >
      <Select state="error">
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
      </Select>
      <Input placeholder="Name" state="error" />
    </Field>
    <FieldSet margin={0}>
      <Field label="First Name">
        <Input />
      </Field>
      <Field label="Last Name" helpContent="Where to find your last name.">
        <Input />
      </Field>
    </FieldSet>
  </StackView>
)

Props

Themeable

Accepts Box props.

Use the field key in ThemeProvider to customize the default properties of this component.

childrenReactReactNode

Usually accepts form fields, such as input or select.

compactboolean

Renders label and field[s] smaller.

distributionnumber

Controls distribution between fields, by passing this prop to StackView. (Defaults to “fill”.)

feedbackTextstring

Helpful text to accompany fields.

helpContentstring | ReactReactNode

Renders content into a HelperDrawer next to label.

iconany

Places an icon to the left of the label.

inlineboolean

Renders label and field[s] inline.

innerRefReactRef

Gain access to the internal ref.

labelstring | ReactReactNode

Label that describes field[s].

labelBasisstring | number

Label flex basis.

labelColorstring

Label color.

labelGrowstring | number

Label flex grow.

spacingnumber

Controls spacing between fields.

state'success' | 'error'

State of field[s].

Props

PreviousDateField NextFieldSet