---
type: doc
title: Toggle Group
description: Native Liquid toggle 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/toggle-group.liquid"
<div
  data-slot='toggle-group'
  role='group'
  data-variant='outline'
  data-default-value='grid'
  aria-label='View'
>
  <button
    type='button'
    data-slot='toggle-group-item'
    data-value='grid'
    aria-label='Grid'
  >
    <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'
    >
      <rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/>
    </svg>
  </button>
  <button
    type='button'
    data-slot='toggle-group-item'
    data-value='list'
    aria-label='List'
  >
    <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='M3 6h.01M3 12h.01M3 18h.01M8 6h13M8 12h13M8 18h13'/>
    </svg>
  </button>
</div>
```

## Installation

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

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

`toggle-group`, `toggle-group-item`.

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

## Variants

`outline`.

## Sizes

`lg`, `sm`.

## Install what this page shows

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