WUI logo

Field

The Field component is a versatile UI element used to create input areas in forms. It typically includes a label and optional helper text or validation messages. This component ensures consistency and accessibility in form design, providing a structured and user-friendly way to capture user input.

Source@welcome-ui/field
OverviewProps
import * as React from 'react'
import { InputText } from '@welcome-ui/input-text'
import { Field } from '@welcome-ui/field'


const Example = () => {
  return (
    <Field hint="A hint" label="Label">
      <InputText placeholder="Placeholder" />
    </Field>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/field
2

Import component:

import { Field } from '@welcome-ui/field'

Examples

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.

Label

Use label to add an Label to your field

Hint

Use hint to add an hint to your field (it can be overload by a variant - see below)

Variants

Use warning, error, info or success properties to add a variant status on your fields. The label, hint or border color are set by magic 🪄

Disabled

Add disabled on Field component

Required

Add required on Field component

Refs

Date time pickerFile drop