FormField

<FormField
  label="Stilt Sandpiper"
  indicator="Worm-eating Warbler"
  hint="Deporto amicitia civitas paulatim cunabula defetiscor depraedor contra."
>
  <Placeholder size={{ height: 300 }} />
</FormField>

<FormField label="Username" hint="Only letters and numbers are allowed.">
  <Input />
</FormField>

<FormField label="Bio" indicator="13 of 200">
  <TextArea
    placeholder="Tell us about yourself..."
    defaultValue="Hello, world!"
    maxLength={200}
  />
</FormField>

<FormField label="Email" error="Please enter a valid email address.">
  <Input defaultValue="example.com" error />
</FormField>

<FormField label="Age" hint="You cannot change this." disabled>
  <Input placeholder="25" disabled />
</FormField>

() => {
  const [value, setValue] = React.useState();

  return (
    <FormField label="Fruit">
      <Select
        placeholder="Select a fruit"
        options={[
          { value: "apple", title: "Apple" },
          { value: "banana", title: "Banana" },
          { value: "cherry", title: "Cherry" },
        ]}
        value={value}
        onChange={setValue}
      />
    </FormField>
  );

}

() => {
  const [checked, setChecked] = React.useState(false);

  const error = !checked && "Please accept the terms and conditions.";

  return (
    <FormField label="Terms & Conditions" error={error}>
      <Checkbox
        label="I have read and agree to the terms and conditions."
        checked={checked}
        onChange={setChecked}
        error={!!error}
      />
    </FormField>
  );

}

() => {
  const [value, setValue] = React.useState(0.5);

  return (
    <FormField label="Volume" indicator={Math.round(value * 100)}>
      <Slider value={value} onChange={setValue} />
    </FormField>
  );

}