Render a custom decrement icon.
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><Fieldtype="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><Fieldtype="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><Fieldtype="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><Fieldtype="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><Fieldtype="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
decrementIcon
ReactNode
help
help
Field help text
string
hideLabel
hideLabel
Hide the field label
boolean
hideStepper
hideStepper
Hide the stepper.
boolean
icon
icon
The checked icon to use The icon element to use in the select
React.ReactElement
React.ReactElement
CheckboxIcon
iconColor
iconColor
The color of the checkbox icon when checked or indeterminate The color of the icon
string
iconSize
iconSize
The size of the checkbox icon when checked or indeterminate The size (width and height) of the icon
string | number
incrementIcon
incrementIcon
Render a custom increment icon.
ReactNode
inputProps
inputProps
Additional props to be forwarded to the input
element
InputHTMLAttributes<HTMLInputElement>
label
label
The field label
string
leftAddon
leftAddon
ReactNode
menuListProps
menuListProps
Props passed to the MenuList.
MenuListProps
multiple
multiple
Enable multiple select.
boolean
name
name
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
string
options
options
An array of options If you leave this empty the children prop will be rendered.
Option[] | Option[] | Option[]
pinLength
pinLength
number
pinType
pinType
"number" | "alphanumeric"
placeholder
placeholder
The input placeholder The placeholder for the pin input
string
ref
ref
ForwardedRef<FocusableElement>
renderValue
renderValue
Customize how the value is rendered.
(value?: string[]) => React.ReactElement
rightAddon
rightAddon
ReactNode
rules
rules
React hook form rules
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
type
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.
string
viewIcon
viewIcon
ReactNode
viewOffIcon
viewOffIcon
ReactNode
Was this helpful?