Field

A controlled form field component.

Field is a complete functional form control that renders a specific field type based on the data type used. It handles the field state, renders a label, the input, help text, error messages

Source
@saas-ui/forms
2.11.4 (latest)

Import#

Field: The wrapper component that controls context, state and manages rendering field types.

import { Field } from '@saas-ui/react'

Usage#

The Field is a controlled component and should aways be wrapped with Form, as it depends on the form context.

Build in field types#

Build in field types are text, textarea, number, password, select, native-select, radio, checkbox, switch, pin. Any other type will fallback to a regular HTML input element. Eg: email will render as a InputField with the type set to email.

Text field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="text" name="name" label="Name" />


        <Field type="email" name="email" label="Email" />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="text" name="name" label="Name" />

        <Field type="email" name="email" label="Email" />
      </FormLayout>
    </Form>
  )
}

Live edit

Textarea field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="textarea" name="description" label="Description" />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="textarea" name="description" label="Description" />
      </FormLayout>
    </Form>
  )
}

Live edit

Number field#

The number field value is always a string, you have to parse it yourself.

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="number"
          name="amount"
          label="Amount"
          value="10"
          min="0"
          max="10"
        />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="number"
          name="amount"
          label="Amount"
          value="10"
          min="0"
          max="10"
        />
      </FormLayout>
    </Form>
  )
}

Live edit

Password field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="password" name="password" label="Password" />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="password" name="password" label="Password" />
      </FormLayout>
    </Form>
  )
}

Live edit

Select field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="select"
          name="role"
          label="Role"
          options={[
            { value: 'Developer' },
            { value: 'Designer' },
            { value: 'Management' },
          ]}
          defaultValue="Developer"
        />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="select"
          name="role"
          label="Role"
          options={[
            { value: 'Developer' },
            { value: 'Designer' },
            { value: 'Management' },
          ]}
          defaultValue="Developer"
        />
      </FormLayout>
    </Form>
  )
}

Live edit

Native Select field#

On mobile devices interaction can be improved by using the native select.

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="native-select"
          name="role"
          label="Role"
          options={[
            { value: 'Developer' },
            { value: 'Designer' },
            { value: 'Management' },
          ]}
          defaultValue="Developer"
        />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="native-select"
          name="role"
          label="Role"
          options={[
            { value: 'Developer' },
            { value: 'Designer' },
            { value: 'Management' },
          ]}
          defaultValue="Developer"
        />
      </FormLayout>
    </Form>
  )
}

Live edit

Radio field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="radio"
          name="role"
          label="Role"
          options={[
            { value: 'Developer' },
            { value: 'Designer' },
            { value: 'Management' },
          ]}
          defaultValue="Developer"
        />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="radio"
          name="role"
          label="Role"
          options={[
            { value: 'Developer' },
            { value: 'Designer' },
            { value: 'Management' },
          ]}
          defaultValue="Developer"
        />
      </FormLayout>
    </Form>
  )
}

Live edit

Checkbox field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="checkbox"
          name="terms"
          label="I've read and agree with the terms of service."
          value={true}
        />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="checkbox"
          name="terms"
          label="I've read and agree with the terms of service."
          value={true}
        />
      </FormLayout>
    </Form>
  )
}

Live edit

Switch field#

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="switch"
          name="terms"
          label="Receive notifications."
          value={true}
        />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field
          type="switch"
          name="terms"
          label="Receive notifications."
          value={true}
        />
      </FormLayout>
    </Form>
  )
}

Live edit

Pin field#

The pin length defaults to 4.

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="pin" name="pin" label="Two-factor auth" pinLength={5} />
      </FormLayout>
    </Form>
  )
}

export default function MyForm() {
  return (
    <Form>
      <FormLayout>
        <Field type="pin" name="pin" label="Two-factor auth" pinLength={5} />
      </FormLayout>
    </Form>
  )
}

Live edit

Advanced#

Creating your own fields.#

// form.tsx
import { createForm, createField } from '@saas-ui/react'

import ReactSelect from 'react-select'

const ReactSelectField = createField(ReactSelect, {
  isControlled: true,
})

export const Form = createForm({
  fields: {
    'react-select': ReactSelectField,
  },
})

Overriding default fields.#

You can override any of the build in types by registering a field on the corresponding key.

// form.tsx
import { createForm, createField } from '@saas-ui/react'

import ReactSelect from 'react-select'

const ReactSelectField = createField(ReactSelect, {
  isControlled: true,
})

export const Form = createForm({
  fields: {
    select: ReactSelectField,
  },
})

Was this helpful?