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

name string

required string | default: false

options string | default: array

orientation string | default: vertical

multiple string | default: true

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
---