Field
version
4.1.2
install
yarn add @welcome-ui/field
usage
import { Field } from '@welcome-ui/field'
About #
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.
Variants #
<Field label="Label" hint="A hint"><InputText placeholder="Placeholder" /></Field><Field label="Label" warning="A warning"><InputText placeholder="Placeholder" /></Field><Field label="Label" error="An error"><InputText placeholder="Placeholder" /></Field>
Disabled #
<Field label="Label" disabled><InputText placeholder="Placeholder" /></Field>
Required #
<Field label="Label" required><InputText placeholder="Placeholder" /></Field>
Refs #
function () {const inputRef = React.React.useRef(null)const handleClick = () => {inputRef.current.focus()}return (<><Field label="I'm a field with a ref on my child component"><InputText ref={inputRef} /></Field><Button mt="md" onClick={handleClick}>Focus InputText</Button></>)}
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
disabled | Boolean | ||
disabledIcon | Element | ||
error | string Element | ||
label | string Element | ||
hint | string Element | ||
required | Boolean | ||
warning | string Element |
Packages #
Dependencies #
Peer dependencies #
Previous
EmojiPickerNext
FileDrop