Skip to Content
Documentation
Saas UI
Saas UI Pro
Starter kits
Get Pro
Getting started
Components
Overview
Forms
Overview
Fields
Styling
Theming

Fields

Built-in field types that can be used to create beautiful forms rapidly with minimal code.

Built-in fields

The form.Field component can be used to create a field for any of these types.

  • text
  • email
  • number
  • password
  • textarea
  • select
  • checkbox
  • radio

If no type is provided, the field will default to text.

import { SubmitButton, useForm } from '@saas-ui/forms'

function MyForm() {
  const form = useForm({
    defaultValues: {
      name: '',
      email: '',
    },
    onSubmit: (values) => {
      console.log(values)
    },
  })

  return (
    <form.Form>
      <form.Field name="name" type="text" />
      <form.Field name="email" type="email" />

      <SubmitButton>Save</SubmitButton>
    </form.Form>
  )
}

Custom fields

Since useForm is built on top of react-hook-form, you can use any of the react-hook-form API to create custom fields.

This is useful when you need to create a one off field that is not supported by the built-in fields.

import { Controller, SubmitButton, useForm } from '@saas-ui/forms'

function MyForm() {
  const form = useForm({
    defaultValues: {
      name: '',
    },
    onSubmit: (values) => {
      console.log(values)
    },
  })

  return (
    <form.Form>
      <Controller
        control={form.control}
        name="name"
        render={({ field }) => <Input {...field} />}
      />

      <SubmitButton>Submit</SubmitButton>
    </form.Form>
  )
}

To create a re-usable custom field, you can use the createField function to define a field type that can be passed to the useForm hook.

import { createField, useForm } from '@saas-ui/forms'

interface InputFieldProps extends InputProps {
  type?: string
  startElement?: React.ReactNode
  endElement?: React.ReactNode
}

const InputField = createField<HTMLInputElement, InputFieldProps>(
  ({ type = 'text', startElement, endElement, size, ...rest }, ref) => {
    return (
      <InputGroup
        startElement={startElement}
        endElement={endElement}
        width="full"
      >
        <Input type={type} size={size} {...rest} ref={ref} />
      </InputGroup>
    )
  },
)

The createField function takes two arguments:

  • The component to render
  • An options object

The options object can be used to configure the field type.

The createField function returns a React component that can be used to render the field.

import { createField, useForm } from '@saas-ui/forms'

const CustomInputField = createField<HTMLInputElement, InputFieldProps>(
  (props, ref) => {
    return <Input {...props} type="text" ref={ref} />
  },
)

function MyForm() {
  const form = useForm({
    fields: {
      custom: CustomInputField,
    },
    defaultValues: {
      name: '',
    },
    onSubmit: (values) => {
      console.log(values)
    },
  })

  return (
    <form.Form>
      <form.Field name="name" type="custom" />

      <SubmitButton>Submit</SubmitButton>
    </form.Form>
  )
}

Next

Introduction