<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
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.jsonFollow the one-time layout setup. 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.
{% 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.
Variants
label.