Back to site

Choice Group

Form field for selecting one or more options.

What are you interested in? 
---
import ChoiceGroup from "@forms/choice-group/ChoiceGroup.astro";
---

<ChoiceGroup
multiple name="interests" options={
  [
    {
      "value": "design",
      "label": "Design",
      "checked": false
    },
    {
      "value": "development",
      "label": "Development",
      "checked": true
    },
    {
      "value": "marketing",
      "label": "Marketing",
      "checked": false
    },
    {
      "value": "business",
      "label": "Business",
      "checked": false
    }
  ]
} title="What are you interested in?"
/>
---
blocks:
  _component: building-blocks/forms/choice-group
  name: interests
  title: What are you interested in?
  multiple: true
  options:
    - value: design
      label: Design
      checked: false
    - value: development
      label: Development
      checked: true
    - value: marketing
      label: Marketing
      checked: false
    - value: business
      label: Business
      checked: false
---

Overview

Lets users choose one or more options from a list. Can display as checkboxes for multiple selections or radio buttons for a single choice. Supports labels and orientation settings.

Properties

title string

Optional title text for the fieldset.

name string

A unique name attribute for the input group.

required boolean | default: false

Whether the field is required.

options array | default: array

Array of choice options with value, label, and checked state.

Item Properties:

value string

The value entered by the user when the option is selected.

label string

The label text for the option.

checked boolean

Whether the field is checked by default.

orientation enum | default: vertical

The layout orientation - vertical for stacked layout, horizontal for grid layout.

Accepted values:
  • vertical
  • horizontal

multiple boolean | default: true

When true, uses checkboxes for multiple selection. When false, uses radio buttons for single selection.

Examples

Types

Communication Preferences 
---
import ChoiceGroup from "@forms/choice-group/ChoiceGroup.astro";
---

<ChoiceGroup
multiple name="preferences" options={
  [
    {
      "value": "newsletter",
      "label": "Subscribe to newsletter",
      "checked": false
    },
    {
      "value": "updates",
      "label": "Get product updates",
      "checked": true
    },
    {
      "value": "promotions",
      "label": "Receive promotions",
      "checked": false
    }
  ]
} title="Communication Preferences"
/>
---
blocks:
  _component: building-blocks/forms/choice-group
  name: preferences
  title: Communication Preferences
  multiple: true
  options:
    - value: newsletter
      label: Subscribe to newsletter
      checked: false
    - value: updates
      label: Get product updates
      checked: true
    - value: promotions
      label: Receive promotions
      checked: false
---
Select Size 
---
import ChoiceGroup from "@forms/choice-group/ChoiceGroup.astro";
---

<ChoiceGroup
name="size" options={
  [
    {
      "value": "small",
      "label": "Small",
      "checked": false
    },
    {
      "value": "medium",
      "label": "Medium",
      "checked": true
    },
    {
      "value": "large",
      "label": "Large",
      "checked": false
    }
  ]
} title="Select Size"
/>
---
blocks:
  _component: building-blocks/forms/choice-group
  name: size
  title: Select Size
  multiple: false
  options:
    - value: small
      label: Small
      checked: false
    - value: medium
      label: Medium
      checked: true
    - value: large
      label: Large
      checked: false
---

Orientation

Select Features 
---
import ChoiceGroup from "@forms/choice-group/ChoiceGroup.astro";
---

<ChoiceGroup
multiple name="features" options={
  [
    {
      "value": "analytics",
      "label": "Analytics Dashboard",
      "checked": false
    },
    {
      "value": "notifications",
      "label": "Push Notifications",
      "checked": true
    },
    {
      "value": "api",
      "label": "API Access",
      "checked": false
    },
    {
      "value": "support",
      "label": "24/7 Support",
      "checked": false
    },
    {
      "value": "backup",
      "label": "Automated Backups",
      "checked": true
    },
    {
      "value": "security",
      "label": "Advanced Security",
      "checked": false
    },
    {
      "value": "mobile",
      "label": "Mobile App",
      "checked": false
    },
    {
      "value": "integrations",
      "label": "Third-party Integrations",
      "checked": false
    },
    {
      "value": "customization",
      "label": "Custom Branding",
      "checked": false
    },
    {
      "value": "reporting",
      "label": "Advanced Reporting",
      "checked": false
    }
  ]
} orientation="vertical" title="Select Features"
/>
---
blocks:
  _component: building-blocks/forms/choice-group
  name: features
  title: Select Features
  orientation: vertical
  multiple: true
  options:
    - value: analytics
      label: Analytics Dashboard
      checked: false
    - value: notifications
      label: Push Notifications
      checked: true
    - value: api
      label: API Access
      checked: false
    - value: support
      label: 24/7 Support
      checked: false
    - value: backup
      label: Automated Backups
      checked: true
    - value: security
      label: Advanced Security
      checked: false
    - value: mobile
      label: Mobile App
      checked: false
    - value: integrations
      label: Third-party Integrations
      checked: false
    - value: customization
      label: Custom Branding
      checked: false
    - value: reporting
      label: Advanced Reporting
      checked: false
---
Select Features 
---
import ChoiceGroup from "@forms/choice-group/ChoiceGroup.astro";
---

<ChoiceGroup
multiple name="features" options={
  [
    {
      "value": "analytics",
      "label": "Analytics Dashboard",
      "checked": false
    },
    {
      "value": "notifications",
      "label": "Push Notifications",
      "checked": true
    },
    {
      "value": "api",
      "label": "API Access",
      "checked": false
    },
    {
      "value": "support",
      "label": "24/7 Support",
      "checked": false
    },
    {
      "value": "backup",
      "label": "Automated Backups",
      "checked": true
    },
    {
      "value": "security",
      "label": "Advanced Security",
      "checked": false
    },
    {
      "value": "mobile",
      "label": "Mobile App",
      "checked": false
    },
    {
      "value": "integrations",
      "label": "Third-party Integrations",
      "checked": false
    },
    {
      "value": "customization",
      "label": "Custom Branding",
      "checked": false
    },
    {
      "value": "reporting",
      "label": "Advanced Reporting",
      "checked": false
    }
  ]
} orientation="horizontal" title="Select Features"
/>
---
blocks:
  _component: building-blocks/forms/choice-group
  name: features
  title: Select Features
  orientation: horizontal
  multiple: true
  options:
    - value: analytics
      label: Analytics Dashboard
      checked: false
    - value: notifications
      label: Push Notifications
      checked: true
    - value: api
      label: API Access
      checked: false
    - value: support
      label: 24/7 Support
      checked: false
    - value: backup
      label: Automated Backups
      checked: true
    - value: security
      label: Advanced Security
      checked: false
    - value: mobile
      label: Mobile App
      checked: false
    - value: integrations
      label: Third-party Integrations
      checked: false
    - value: customization
      label: Custom Branding
      checked: false
    - value: reporting
      label: Advanced Reporting
      checked: false
---

Required

Preferred Contact Method * 
---
import ChoiceGroup from "@forms/choice-group/ChoiceGroup.astro";
---

<ChoiceGroup
name="contact-method" options={
  [
    {
      "value": "email",
      "label": "Email",
      "checked": false
    },
    {
      "value": "phone",
      "label": "Phone",
      "checked": false
    },
    {
      "value": "sms",
      "label": "SMS",
      "checked": false
    }
  ]
} required title="Preferred Contact Method"
/>
---
blocks:
  _component: building-blocks/forms/choice-group
  name: contact-method
  title: Preferred Contact Method
  required: true
  multiple: false
  options:
    - value: email
      label: Email
      checked: false
    - value: phone
      label: Phone
      checked: false
    - value: sms
      label: SMS
      checked: false
---