---
type: doc
title: Native Select
description: Native Liquid native select 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/native-select.liquid"
<div data-slot='field'>
  <label data-slot='field-label' for='size'>Size</label
  ><select data-slot='native-select' id='size' name='size'>
    <option value='small'>Small</option>
    <option value='medium'>Medium</option>
    <option value='large'>Large</option>
  </select>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/native-select.json https://ui.full.dev/r/liquid/field.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' %}
```

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.

[Theming](/liquid/docs/theming/)

## Install what this page shows

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