# fields — Examples

## default — stacked

```html
<fields-ui>
  <field-ui label="Name">
    <input-ui type="text" placeholder="Jane Doe"></input-ui>
  </field-ui>
  <field-ui label="Email">
    <input-ui type="email" placeholder="jane@example.com"></input-ui>
  </field-ui>
</fields-ui>
```

## rows — 3-up

```html
<fields-ui>
  <field-ui label="Status" rows="2">
    <select-ui value="todo">
      <option value="todo">To do</option>
      <option value="doing">Doing</option>
      <option value="done">Done</option>
    </select-ui>
  </field-ui>
  <field-ui label="Priority" rows="2">
    <select-ui value="0">
      <option value="0">Normal</option>
      <option value="1">High</option>
      <option value="2">Urgent</option>
    </select-ui>
  </field-ui>
  <field-ui label="Group" rows="2">
    <select-ui value="alpha">
      <option value="alpha">Alpha</option>
      <option value="beta">Beta</option>
    </select-ui>
  </field-ui>
</fields-ui>
```

## inline

```html
<fields-ui inline>
  <field-ui label="Search">
    <input-ui type="search" placeholder="Type to search…"></input-ui>
  </field-ui>
  <field-ui label="Kind">
    <select-ui value="all">
      <option value="all">All</option>
      <option value="docs">Docs</option>
      <option value="components">Components</option>
    </select-ui>
  </field-ui>
</fields-ui>
```
