---
type: doc
title: Field
description: Native Liquid field with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/field.liquid"
<div data-slot='field'>
  <label data-slot='field-label' for='ui-reference-size'>Size</label>
  <select id='ui-reference-size' name='size' required data-fallback>
    <option value='' disabled selected>Choose a size</option>

    <option value='small'>Small</option>

    <option value='medium'>Medium</option>

    <option value='large'>Large</option>
  </select>
  <div
    data-slot='select'
    data-name='size'
    data-required
    data-placeholder='Choose a size'
    hidden
  >
    <button type='button' data-slot='select-trigger'>
      <span data-slot='select-value'></span>

      <svg
        class='icon'
        data-slot='icon'
        viewBox='0 0 24 24'
        fill='none'
        stroke='currentColor'
        stroke-width='2'
        stroke-linecap='round'
        stroke-linejoin='round'
        aria-hidden='true'
        focusable='false'
      >
        <path d='m6 9 6 6 6-6'/>
      </svg>
    </button>
    <div data-slot='select-portal'>
      <div data-slot='select-positioner'>
        <div data-slot='select-content' hidden>
          <div data-slot='select-viewport'>
            <div data-slot='select-item' data-value='small'>
              <span data-slot='select-item-text'>Small</span>
              <span data-slot='select-item-indicator'>
                <svg
                  class='icon'
                  data-slot='icon'
                  viewBox='0 0 24 24'
                  fill='none'
                  stroke='currentColor'
                  stroke-width='2'
                  stroke-linecap='round'
                  stroke-linejoin='round'
                  aria-hidden='true'
                  focusable='false'
                >
                  <path d='M20 6 9 17l-5-5'/>
                </svg>
              </span>
            </div>

            <div data-slot='select-item' data-value='medium'>
              <span data-slot='select-item-text'>Medium</span>
              <span data-slot='select-item-indicator'>
                <svg
                  class='icon'
                  data-slot='icon'
                  viewBox='0 0 24 24'
                  fill='none'
                  stroke='currentColor'
                  stroke-width='2'
                  stroke-linecap='round'
                  stroke-linejoin='round'
                  aria-hidden='true'
                  focusable='false'
                >
                  <path d='M20 6 9 17l-5-5'/>
                </svg>
              </span>
            </div>

            <div data-slot='select-item' data-value='large'>
              <span data-slot='select-item-text'>Large</span>
              <span data-slot='select-item-indicator'>
                <svg
                  class='icon'
                  data-slot='icon'
                  viewBox='0 0 24 24'
                  fill='none'
                  stroke='currentColor'
                  stroke-width='2'
                  stroke-linecap='round'
                  stroke-linejoin='round'
                  aria-hidden='true'
                  focusable='false'
                >
                  <path d='M20 6 9 17l-5-5'/>
                </svg>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/field.json https://ui.full.dev/r/liquid/icon.json https://ui.full.dev/r/liquid/select.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-input' %}
{% render 'ui-field' %}
{% render 'ui-icon' %}
{% render 'ui-popup' %}
{% render 'ui-invalid-controls' %}
{% render 'ui-runtime' %}
{% render 'ui-select' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`field`, `field-description`, `field-error`, `field-group`, `field-label`, `field-legend`, `field-set`, `label`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/field.liquid) · [Theming](/liquid/docs/theming/)

## Variants

`label`.

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/field.json https://ui.full.dev/r/liquid/icon.json https://ui.full.dev/r/liquid/select.json
```