---
type: doc
title: Radio Group
description: Native Liquid radio group 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/radio-group.liquid"
<fieldset data-slot='field-set'>
  <legend id='ui-reference-delivery-label' data-slot='field-legend' data-variant='label'>Delivery</legend>
  <div data-fallback>
    <label data-slot='label'>
      <input
        type='radio'
        name='delivery'
        value='standard'

        checked
      >
      Standard
    </label>

    <label data-slot='label'>
      <input
        type='radio'
        name='delivery'
        value='express'
      >
      Express
    </label>

    <label data-slot='label'>
      <input
        type='radio'
        name='delivery'
        value='pickup'
      >
      Pickup
    </label>
  </div>
  <div
    data-slot='radio-group'
    role='radiogroup'
    data-name='delivery'
    data-default-value='standard'
    aria-labelledby='ui-reference-delivery-label'
    hidden
  >
    <label data-slot='label'>
      <span data-slot='radio-group-item' data-value='standard'>
        <span data-slot='radio-group-indicator'></span>
      </span>
      Standard
    </label>

    <label data-slot='label'>
      <span data-slot='radio-group-item' data-value='express'>
        <span data-slot='radio-group-indicator'></span>
      </span>
      Express
    </label>

    <label data-slot='label'>
      <span data-slot='radio-group-item' data-value='pickup'>
        <span data-slot='radio-group-indicator'></span>
      </span>
      Pickup
    </label>
  </div>
</fieldset>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/radio-group.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-invalid-controls' %}
{% render 'ui-runtime' %}
{% render 'ui-radio-group' %}
{% 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.

## Parts

`radio-group`, `radio-group-indicator`, `radio-group-item`.

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

## Install what this page shows

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