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

Import#

  • Field: The wrapper component that controls context, state and manages rendering field types.
import {
  Field,
  InputField,
  TextareaField,
  NumberInputField,
  SelectField,
  RadioField,
  CheckboxField,
  SwitchField,
  PasswordField,
  PinField,
  NativeSelectField,
} 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#

<Form>
  <FormLayout>
    <Field type="text" name="name" label="Name" />
    {/* or: <InputField name="title" label="Title" /> */}


    <Field type="email" name="email" label="Email" />
    {/* or: <InputField name="title" type="email" label="Title" /> */}
  </FormLayout>
</Form>

Textarea field#

<Form>
  <Field type="textarea" name="description" label="Description" />
  {/* or: <TextareaField name="description" label="Description" /> */}
</Form>

Number field#

<Form>
  <Field type="number" name="amount" label="Amount" value="10" />
  {/* or: <NumberInputField type='number' name="amount" label="Amount" /> */}
</Form>

Password field#

<Form>
  <Field type="password" name="password" label="Password" />
  {/* or: <PasswordField name="password" label="Password" /> */}
</Form>

Select field#

<Form>
  <Field
    type="select"
    name="role"
    label="Role"
    options={[
      { value: 'Developer' },
      { value: 'Designer' },
      { value: 'Management' },
    ]}
    value="developer"
  />
  {/* or: <SelectField name="role" label="Role" options={[{value: 'Developer'}, {value: 'Designer'}, {value: 'Management'}]}  /> */}
</Form>

Native Select field#

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

<Form>
  <Field
    type="native-select"
    name="role"
    label="Role"
    options={[
      { value: 'Developer' },
      { value: 'Designer' },
      { value: 'Management' },
    ]}
    value="developer"
  />
  {/* or: <NativeSelectField name="role" label="Role" options={[{value: 'Developer'}, {value: 'Designer'}, {value: 'Management'}]}  /> */}
</Form>

Radio field#

<Form>
  <Field
    type="radio"
    name="role"
    label="Role"
    options={[
      { value: 'Developer' },
      { value: 'Designer' },
      { value: 'Management' },
    ]}
    value="developer"
  />
  {/* or: <RadioField name="role" label="Role" options={[{value: 'Developer'}, {value: 'Designer'}, {value: 'Management'}]}  /> */}
</Form>

Checkbox field#

<Form>
  <Field
    type="checkbox"
    name="terms"
    label="I've read and agree with the terms of service."
    value={true}
  />
  {/* or: <CheckboxField name="terms" label="I've read and agree with the terms of service." value={true} /> */}
</Form>

Switch field#

<Form>
  <Field
    type="switch"
    name="terms"
    label="Receive notifications."
    value={true}
  />
  {/* or: <SwitchField name="terms" label="Receive notifications." value={true} /> */}
</Form>

Pin field#

The pin length defaults to 4.

<Form>
  <Field type="pin" name="pin" label="Two-factor auth" pinLength={5} />


  {/* or: <PinField name="confirm" label="Confirmation code." pinLength={5} /> */}
</Form>

Advanced#

Creating your own field types.#

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


import ReactSelect from 'react-select'


const ReactSelectField = registerFieldType('react-select', ReactSelect, {
  isControlled: true,
})

Overriding default fields.#

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

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


import ReactSelect from 'react-select'


const ReactSelectField = registerFieldType('select', ReactSelect, {
  isControlled: true,
})

Props#

decrementIcon

Description

Render a custom decrement icon.

Type
ReactNode

help

Description

Field help text

Type
string

hideLabel

Description

Hide the field label

Type
boolean

hideStepper

Description

Hide the stepper.

Type
boolean

icon

Description

The checked icon to use The icon element to use in the select

Type
React.ReactElement React.ReactElement
Default
CheckboxIcon

iconColor

Description

The color of the checkbox icon when checked or indeterminate The color of the icon

Type
string

iconSize

Description

The size of the checkbox icon when checked or indeterminate The size (width and height) of the icon

Type
string | number

incrementIcon

Description

Render a custom increment icon.

Type
ReactNode

inputProps

Description

Additional props to be forwarded to the input element

Type
InputHTMLAttributes<HTMLInputElement>

label

Description

The field label

Type
string

leftAddon

Type
ReactNode

menuListProps

Description

Props passed to the MenuList.

Type
MenuListProps

multiple

Description

Enable multiple select.

Type
boolean

name

Description

The field name The HTML name attribute used for forms The name of the input field in a checkbox (Useful for form submission). The name attribute forwarded to each radio element

Type
string

options

Description

An array of options If you leave this empty the children prop will be rendered.

Type
Option[] | Option[] | Option[]

pinLength

Type
number

pinType

Type
"number" | "alphanumeric"

placeholder

Description

The input placeholder The placeholder for the pin input

Type
string

ref

Type
ForwardedRef<FocusableElement>

renderValue

Description

Customize how the value is rendered.

Type
(value?: string[]) => React.ReactElement

rightAddon

Type
ReactNode

rules

Description

React hook form rules

Type
Omit<Partial<{ required: string | ValidationRule<boolean>; min: ValidationRule<string | number>; max: ValidationRule<string | number>; ... 12 more ...; deps: string | string[]; }>, "disabled" | ... 2 more ... | "setValueAs"> | (Omit<...> & Omit<...>)

type

Description

Build-in types: - text - number - password - textarea - select - native-select - checkbox - radio - switch - pin Will default to a text field if there is no matching type.

Type
string

viewIcon

Type
ReactNode

viewOffIcon

Type
ReactNode

Was this helpful?