field

import { Field } from "woly";

Field is a master component that will make it easy to modify the label based on the field settings It’s common for fields to have different settings that are usually displayed in the label.

Label

Field labels display the type of input a field requires. Every field component should have a label.

Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating.

Input line The input line indicates where to enter text, displayed below the label.

Example

<Playground>
  <Field label="Label">
    <Input
      priority="primary"
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Placeholder"
      type="text"
    />
  </Field>
</Playground>

Labels

Labels can be used in case for a standalone component, in common it will be eg input, toggle, textarea

or also as a label of group of component, eg checkbox or radiobutton groups.

<Playground size="S">
  <Field label="Label of group">
    <Checkbox text="Item text" priority="secondary" />
    <Checkbox text="Item text" priority="secondary" />
    <Checkbox text="Item text" priority="secondary" />
  </Field>
  <Field label="Label for a standalone component" priority="primary">
    <TextArea
      name="name"
      placeholder="TextArea"
      onChange={() => console.info('On textarea change')}
      priority="primary"
      overflow="hidden"
      disabled
    />
  </Field>
  <Field label="Label for input">
    <InputPassword
      iconHidden={<IconEyeClosed />}
      iconOpen={<IconEyeOpened />}
      name="input"
      onChange={() => console.info('change')}
      placeholder="Enter password"
      priority="primary"
    />
  </Field>
</Playground>

Labels and children component can be replaced in row

<Playground size="S">
  <Field label="Label of set" row>
    <Checkbox text="Item text" priority="secondary" />
    <Checkbox text="Item text" priority="secondary" />
    <Checkbox text="Item text" priority="secondary" />
  </Field>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <Field label="Label of item" row>
        <Switch checked={value} onChange={change} id="roundTwo" priority="primary" />
      </Field>
    )}
  </State>
</Playground>

or in column priorities

<Playground size="S">
  <Field label="Label of set">
    <Checkbox text="Item text" priority="secondary" />
    <Checkbox text="Item text" priority="secondary" />
    <Checkbox text="Item text" priority="secondary" />
  </Field>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <Field label="Label of item">
        <Switch checked={value} onChange={change} id="roundOne" priority="primary" />
      </Field>
    )}
  </State>
</Playground>

Priorities

Error priority can be used to focus user attention on error.

<Playground direction="vertical">
  <Field label="Textarea with error" priority="danger">
    <TextArea
      name="name"
      placeholder="TextArea"
      onChange={() => console.info('On textarea change')}
      priority="danger"
      overflow="hidden"
      disabled
    />
  </Field>
  <Field label="Input with error" priority="danger">
    <Input
      priority="danger"
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Placeholder"
      type="text"
    />
  </Field>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <Field label="Switch with error">
        <Switch checked={value} onChange={change} id="roundOne" priority="danger" />
      </Field>
    )}
  </State>
</Playground>

Props

NameTypeDefaultDescription
childrenReact.ReactNodeField content
labelReact.ReactNodeText appeared above the content
prioritystring'secondary'Priority prop to style component
rowbooleanThe row attribute specifies direction of label and component