Field

We recommend using Final Form, Redux Form or Formik with these components. If so, use ConnectedField 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.

Install and import

yarn add @welcome-ui/field @xstyled/styled-components @xstyled/system react react-dom styled-components

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

Sizes

I'm a small sized field
I'm a medium sized field
I'm a large sized field which is my default size
Show editor

Variants

Label
A hint
Label
Label
Show editor

Disabled

Label
{
  "disabled": "Disabled value"
}
{
  "disabled": "Disabled value"
}
Show editor

Required

Label
Show editor

Refs

You can create a ref* and pass it to a component to access the underlying DOM element.

Note: refs can be created with either React.createRef() or React.useRef(null) for functional components or a callback ref if using a React class.

Connected field
Normal field
Naked field
Complex fieldUpload file
Click a button below to focus the relevant field above
Connected fieldNormal fieldNaked fieldFile upload field
Click the button below to read the button's ref in the console
Test button
Click the link below to read the link's ref in the console
Test link
Show editor

Properties

Dependencies

• - @welcome-ui/field-group
  ^3.4.0
• - @welcome-ui/hint
  ^3.4.0
• - @welcome-ui/label
  ^3.4.0
• - @welcome-ui/system
  ^3.0.0
• - polished
  ^3.4.1

Peer dependencies

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1