> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox 05

> Inline horizontal checkbox group with three labeled options, icons, and toggle states.

<Frame>
  ![Checkbox 05](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Checkboxes/checkbox-multiple-inline.png)
</Frame>

## Overview

Checkbox 05 is a multi-select inline checkbox component featuring three horizontally arranged options (Option 1, Option 2, Option 3). Each option consists of a square icon acting as a checkbox and a text label. Selections are tracked via a custom state list on the parent group, allowing multiple items to be selected or deselected simultaneously. It is designed for forms or filter UIs where users need to pick multiple values in a compact row layout.

## How to use

<Steps>
  <Step titleSize="h4" title="Open the Brikl panel">
    Navigate to the **Elements** category in the Brikl panel.
  </Step>

  <Step titleSize="h4" title="Copy the component">
    Find **Checkbox 05** and click **Copy**.
  </Step>

  <Step titleSize="h4" title="Paste into your editor">
    Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows),
    or right-click on the canvas and select **Paste**.
  </Step>
</Steps>

## States

This component includes conditional states that automatically change its appearance.

| State            | Trigger                                                                                                    | Visual effect                                                                                   |
| ---------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Checked          | User clicks an option group; the option's item\_ number is contained in the parent's selected\_item\_ list | Icon changes from outlined crop\_square to filled check with a dark background (rgba(11,8,9,1)) |
| Unchecked        | Option's item\_ number is not present in the parent's selected\_item\_ list                                | Icon displays outlined crop\_square with white background and light border                      |
| Mobile font size | Current page width is less than the built-in mobile breakpoint                                             | Label text font size reduces to 14px                                                            |

<Note>
  These states are handled natively by Bubble and require no additional setup.
  They will work automatically once the component is pasted into your editor.
</Note>

## Responsive

This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint.

## Workflows

This component includes pre-built workflows.

| Trigger                                                                   | Action                                                                    |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| Group - Option 2 clicked (condition: item 2 NOT in selected\_item\_ list) | Adds item 2 to the parent group's selected\_item\_ custom state list      |
| Group - Option 2 clicked (condition: item 2 IS in selected\_item\_ list)  | Removes item 2 from the parent group's selected\_item\_ custom state list |
| Group - Option 1 clicked (condition: item 1 NOT in selected\_item\_ list) | Adds item 1 to the parent group's selected\_item\_ custom state list      |
| Group - Option 1 clicked (condition: item 1 IS in selected\_item\_ list)  | Removes item 1 from the parent group's selected\_item\_ custom state list |
| Group - Option 3 clicked (condition: item 3 NOT in selected\_item\_ list) | Adds item 3 to the parent group's selected\_item\_ custom state list      |
| Group - Option 3 clicked (condition: item 3 IS in selected\_item\_ list)  | Removes item 3 from the parent group's selected\_item\_ custom state list |

<Note>
  These workflows are included when you use the **Copy with Workflows** option in the Brikl panel.
</Note>

## Requirements

|             |                       |
| ----------- | --------------------- |
| License     | Starter plan required |
| Plugins     | None                  |
| Custom code | Not required          |

## Platforms

| Platform | Supported |
| -------- | --------- |
| Web      | ✅         |
| Mobile   | ✅         |

## License

<Note>
  This component requires a **Starter** plan.
</Note>