Field

About #

We recommend using React-hook-form or Formik with these components. If so, use Field for your fields (as in the examples below). The examples below give you an overview of common props (e.g. size, disable, required etc.)

You can find props for each field component in the other Forms pages.

Variants #

<Field label="Label" hint="A hint">
  <InputText placeholder="Placeholder" />
</Field>
<Field label="Label" warning="A warning">
  <InputText placeholder="Placeholder" />
</Field>
<Field label="Label" error="An error">
  <InputText placeholder="Placeholder" />
</Field>
Copy

Disabled #

<Field label="Label" disabled>
  <InputText placeholder="Placeholder" />
</Field>
Copy

Required #

<Field label="Label" required>
  <InputText placeholder="Placeholder" />
</Field>
Copy

Refs #

function () {
  const inputRef = React.React.useRef(null)

  const handleClick = () => {
    inputRef.current.focus()
  }

  return (
    <>
      <Field label="I'm a field with a ref on my child component">
        <InputText ref={inputRef} />
      </Field>
      <Button mt="md" onClick={handleClick}>Focus InputText</Button>
    </>
  )
}
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #