Field

View Source

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

First Name

Select an item

Select at least one choice, Name cannot be blank

First Name

Last Name

Copy

Edit

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