@personio/ui-docs/components/form/form.mdx

---
name: Form
menu: Components
route: /components/form
---

import { Playground, PropsTable } from 'docz'
import moment from 'moment'
import { Form, Button, InputText, InputHint, Select, Radio, Icon, Tooltip } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'
import './form.scss';

# Form
Forms obtain user data and transmits it to the system either to store, produce an action, or both. Forms should be simple and minimalist and guide users to accomplish specific tasks. When designing a form, it is crucial to think about the structure of the page, sequence, UI elements, field labels and feedback.

<PropsTable of={Form} />

## Examples

<Playground>
  <div>
    <Form>
      <Form.Row label="Input default" labelFor="input-default" actAsRow>
        <InputText id="input-default" name="input-default" placeholder="Input default" />
      </Form.Row>
      <Form.Row label="Input hover" labelFor="input-hover">
        <InputText id="input-hover" name="input-hover" placeholder="Input hover" hover />
      </Form.Row>
      <Form.Row label="Input focus" labelFor="input-focus">
        <InputText id="input-focus" name="input-focus" placeholder="Input focus" focus />
      </Form.Row>
      <Form.Row label="Input disabled" labelFor="input-disabled">
        <InputText id="input-disabled" name="input-disabled" placeholder="Input disabled" disabled />
      </Form.Row>
      <Form.Row label="Input with icon" labelFor="input-icon">
        <InputText.WithIcon
          iconName="calendar"
          id="input-icon"
          name="input-icon"
          placeholder="Placeholder text"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        />
        <div>lorem</div>
      </Form.Row>
      <Form.Row label="Input with icon text" labelFor="input-icon-text">
        <InputText.WithIcon
          iconText="€"
          id="input-icon-text"
          name="input-icon-text"
          placeholder="Placeholder text"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        />
      </Form.Row>
      <Form.Row label="Input with icon text on the right" labelFor="input-icon-text-right">
        <InputText.WithIcon
          iconContainerTheme="transparent"
          iconPosition="right"
          iconText="/40"
          id="input-icon-text-right"
          name="input-icon-text-right"
          placeholder="Placeholder text"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        />
      </Form.Row>
    </Form>
  </div>
</Playground>


## Input size
Inputs can be small, regular or large. Additionally, they should have a min-width and be flexible in terms of max-width (adaptive width as per the HTML container).

<Playground>
  <div>
    <Form>
      <Form.Row label="Input / Small" labelFor="input-small">
        <InputText id="input-small" name="input-small" size="small" placeholder="Input / Small" />
      </Form.Row>
      <Form.Row label="Input / Default" labelFor="input-medium">
        <InputText id="input-medium" name="input-medium" size="medium" placeholder="Input / Medium" />
      </Form.Row>
      <Form.Row label="Input / Large" labelFor="input-large">
        <InputText id="input-large" name="input-large" size="large" placeholder="Input / Large" />
      </Form.Row>
    </Form>
  </div>
</Playground>

## Helper Messages

<Playground>
  <div>
    <Form>
      <Form.Row label="Input / Helper text" labelFor="input-helper">
        <InputText id="input-helper" name="input-helper" placeholder="Helper text" />
        <InputHint>Help or instruction text goes here</InputHint>
      </Form.Row>
      <Form.Row label="Input / Helper text error" labelFor="input-error">
        <InputText theme="error" id="input-error" name="input-error" placeholder="Helper error text" />
        <InputHint theme="danger">Error message goes here</InputHint>
      </Form.Row>
      <Form.Row label="Input / Helper text warning" labelFor="input-warning">
        <InputText theme="warning" id="input-warning" name="input-warning" placeholder="Helper warning text" />
        <InputHint theme="warning">Warning message goes here</InputHint>
      </Form.Row>
      <Form.Row label="Input / Helper text success" labelFor="input-success">
        <InputText theme="success" id="input-success" name="input-success" placeholder="Helper success text" />
        <InputHint theme="success">Success message goes here</InputHint>
      </Form.Row>
    </Form>
  </div>
</Playground>

# Radio

<PropsTable of={Radio} />

## Radio Not Controlled

<Playground>
  <div>
    <Form>
      <Form.Row label="Salary Type">
        <Radio
          name="example"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        >
          <Radio.Item value="lorem">Lorem</Radio.Item>
          <Radio.Item value="ipsum">Ipsum</Radio.Item>
          <Radio.Item value="dolor">Dolor</Radio.Item>
        </Radio>
      </Form.Row>
    </Form>
  </div>
</Playground>

## Radio Not Controlled with pre-defined option

<Playground>
  <div>
    <Form>
      <Form.Row label="Salary Type">
        <Radio
          name="example"
          defaultValue="dolor"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        >
          <Radio.Item value="lorem">Lorem</Radio.Item>
          <Radio.Item value="ipsum">Ipsum</Radio.Item>
          <Radio.Item value="dolor">Dolor</Radio.Item>
        </Radio>
      </Form.Row>
    </Form>
  </div>
</Playground>

## Radio Controlled

<Playground>
  <div>
    <State initial={{ value: 'ipsum' }}>
      {({ state, setState }) => (
        <Form>
          <Form.Row label="Salary Type">
            <Radio
              name="example"
              value={state.value}
              onChange={(e) => {
                setState({ value: e.target.value })
              }}
            >
              <Radio.Item value="lorem">Lorem</Radio.Item>
              <Radio.Item value="ipsum">Ipsum</Radio.Item>
              <Radio.Item value="dolor">Dolor</Radio.Item>
            </Radio>
          </Form.Row>
        </Form>
      )}
    </State>
  </div>
</Playground>

## Radio horizontal

<Playground>
  <div>
    <Form>
      <Form.Row label="Salary Type">
        <Radio
          name="example"
          horizontal
          onChange={(e) => {
            console.log(e.target.value)
          }}
        >
          <Radio.Item value="lorem">Lorem</Radio.Item>
          <Radio.Item value="ipsum">Ipsum</Radio.Item>
          <Radio.Item value="dolor">Dolor</Radio.Item>
        </Radio>
      </Form.Row>
    </Form>
  </div>
</Playground>

## Radio Item disabled

<Playground>
  <div>
    <Form>
      <Form.Row label="Salary Type">
        <Radio
          name="example"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        >
          <Radio.Item value="lorem">Lorem</Radio.Item>
          <Radio.Item value="ipsum" disabled>Ipsum</Radio.Item>
          <Radio.Item value="dolor">Dolor</Radio.Item>
        </Radio>
      </Form.Row>
    </Form>
  </div>
</Playground>

# Select

<PropsTable of={Select} />

## Not controlled

<Playground>
  <div>
    <Form>
      <Form.Row label="Salary Type">
        <Select
          name="example"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        >
          <Select.Option value="lorem">Lorem</Select.Option>
          <Select.Option value="ipsum">Ipsum</Select.Option>
          <Select.Option value="dolor">Dolor</Select.Option>
        </Select>
      </Form.Row>
    </Form>
  </div>
</Playground>

## Not controlled with default option

<Playground>
  <div>
    <Form>
      <Form.Row label="Salary Type">
        <Select
          name="example"
          defaultValue="dolor"
          onChange={(e) => {
            console.log(e.target.value)
          }}
        >
          <Select.Option value="lorem">Lorem</Select.Option>
          <Select.Option value="ipsum">Ipsum</Select.Option>
          <Select.Option value="dolor">Dolor</Select.Option>
        </Select>
      </Form.Row>
    </Form>
  </div>
</Playground>

## Controlled

<Playground>
  <div>
    <State initial={{ value: 'ipsum' }}>
      {({ state, setState }) => (
        <Form>
          <Form.Row label="Salary Type">
            <Select
              name="example"
              value={state.value}
              onChange={(e) => {
                setState({ value: e.target.value })
              }}
            >
              <Select.Option value="lorem">Lorem</Select.Option>
              <Select.Option value="ipsum">Ipsum</Select.Option>
              <Select.Option value="dolor">Dolor</Select.Option>
            </Select>
          </Form.Row>
        </Form>
      )}
    </State>
  </div>
</Playground>

## With a placeholder

<Playground>
  <div>
    <State initial={{ value: '' }}>
      {({ state, setState }) => (
        <Form>
          <Form.Row label="Salary Type">
            <Select
              name="example"
              placeholder="Please select"
              value={state.value}
              onChange={(e) => {
                setState({ value: e.target.value })
              }}
            >
              <Select.Option value="lorem">Lorem</Select.Option>
              <Select.Option value="ipsum">Ipsum</Select.Option>
              <Select.Option value="dolor">Dolor</Select.Option>
            </Select>
          </Form.Row>
        </Form>
      )}
    </State>
  </div>
</Playground>

## Disabled

<Playground>
  <div>
    <State initial={{ value: 'ipsum' }}>
      {({ state, setState }) => (
        <Form>
          <Form.Row label="Salary Type">
            <Select
              name="example"
              disabled
              value={state.value}
              onChange={(e) => {
                setState({ value: e.target.value })
              }}
            >
              <Select.Option value="lorem">Lorem</Select.Option>
              <Select.Option value="ipsum">Ipsum</Select.Option>
              <Select.Option value="dolor">Dolor</Select.Option>
            </Select>
          </Form.Row>
        </Form>
      )}
    </State>
  </div>
</Playground>