Cartzilla component

Select box

Single / multiple select with search and sorting, tags components.

The SelectBox component is a React wrapper for the Choices.js plugin. This allows you to configure most common Choices.js options directly through props.

Available props:

type="single" - Specifies the input type: "single", "multiple", or "text", corresponding to basic select, multiselect, and tags input, respectively.
choices={[]} - An array of objects, each representing an option with a specific structure. For details on the choice object structure, refer to the documentation.
items={[]} - An array of objects, each representing a pre-selected item. For details on the item object structure, refer to the documentation.
customTemplate={false} - Specifies whether a custom template can be used for options.
Underlying input attributes: inputClassName, inputId, name, value, defaultValue, placeholder, required, disabled
searchEnabled={false} - Determines whether a search input is displayed inside the options dropdown.
searchPlaceholder="Search..." - Search input placeholder text.
removeItemButton={true} - Specifies if a clear selection button should appear after the user selects an option.
shouldSort={false} - Determines whether choices, items and groups should be sorted. If set to false, they will appear in their original order.
onChange={(value) => console.log(value)} - Triggered each time an item is added/removed by a user.
onAddItem={(item) => console.log(item)} - Triggered each time an item is added (programmatically or by the user).
onRemoveItem={(item) => console.log(item)} - Triggered each time an item is removed (programmatically or by the user).
loadingText="Loading..."
noResultsText="No results found"
noChoicesText="No options to choose from"
addItemText="Press Enter to add"
addItemText="Remove item"

Basic select

import SelectBox from '@/components/forms/select-box'

export default function SelectBoxBasicDemo() {
  return (
    <>
      <SelectBox
        choices={[
          { value: 'Emily Johnson', label: 'Emily Johnson' },
          { value: 'Michael Davis', label: 'Michael Davis' },
          { value: 'Jessica Smith', label: 'Jessica Smith' },
          { value: 'Christopher Taylor', label: 'Christopher Taylor' },
          { value: 'Olivia Anderson', label: 'Olivia Anderson' },
          { value: 'Ethan Williams', label: 'Ethan Williams' },
        ]}
        placeholder="Choose name..."
        className="mb-4"
        aria-label="Basic select example"
      />

      {/* Disbaled select */}
      <SelectBox
        choices={[
          { value: 1, label: 'Option 1' },
          { value: 2, label: 'Option 2' },
          { value: 3, label: 'Option 3' },
          { value: 4, label: 'Option 4' },
          { value: 5, label: 'Option 5' },
        ]}
        placeholder="Disabled select"
        aria-label="Disabled select example"
        disabled
      />
    </>
  )
}

Search and option groups

import SelectBox from '@/components/forms/select-box'

export default function SelectBoxSearchGroupsDemo() {
  return (
    <SelectBox
      choices={[
        {
          label: 'Africa',
          choices: [
            { value: 'Nigeria', label: 'Nigeria' },
            { value: 'South Africa', label: 'South Africa' },
            { value: 'Kenya', label: 'Kenya' },
            { value: 'Egypt', label: 'Egypt' },
            { value: 'Ethiopia', label: 'Ethiopia' },
          ],
        },
        {
          label: 'Asia',
          choices: [
            { value: 'China', label: 'China' },
            { value: 'India', label: 'India' },
            { value: 'Japan', label: 'Japan' },
            { value: 'South Korea', label: 'South Korea' },
            { value: 'Saudi Arabia', label: 'Saudi Arabia' },
          ],
        },
        {
          label: 'Europe',
          choices: [
            { value: 'Germany', label: 'Germany' },
            { value: 'France', label: 'France' },
            { value: 'United Kingdom', label: 'United Kingdom' },
            { value: 'Italy', label: 'Italy' },
            { value: 'Spain', label: 'Spain' },
          ],
        },
        {
          label: 'North America',
          choices: [
            { value: 'United States', label: 'United States' },
            { value: 'Canada', label: 'Canada' },
            { value: 'Mexico', label: 'Mexico' },
            { value: 'Jamaica', label: 'Jamaica' },
            { value: 'Costa Rica', label: 'Costa Rica' },
          ],
        },
        {
          label: 'South America',
          choices: [
            { value: 'Brazil', label: 'Brazil' },
            { value: 'Argentina', label: 'Argentina' },
            { value: 'Colombia', label: 'Colombia' },
            { value: 'Chile', label: 'Chile' },
            { value: 'Peru', label: 'Peru' },
          ],
        },
        {
          label: 'Oceania',
          choices: [
            { value: 'Australia', label: 'Australia' },
            { value: 'New Zealand', label: 'New Zealand' },
            { value: 'Papua New Guinea', label: 'Papua New Guinea' },
            { value: 'Fiji', label: 'Fiji' },
            { value: 'Solomon Islands', label: 'Solomon Islands' },
          ],
        },
      ]}
      searchEnabled
      placeholder="Select country..."
      aria-label="Select with option groups and search"
    />
  )
}

Multiple select

import SelectBox from '@/components/forms/select-box'

export default function SelectBoxMultipleDemo() {
  return (
    <>
      <SelectBox
        type="multiple"
        choices={[
          { value: 'Shopify', label: 'Shopify', selected: true },
          { value: 'WooCommerce', label: 'WooCommerce' },
          { value: 'Magento', label: 'Magento' },
          { value: 'OpenCart', label: 'OpenCart' },
          { value: 'PrestaShop', label: 'PrestaShop' },
          { value: 'VirtueMart', label: 'VirtueMart' },
        ]}
        placeholder="Select CMS"
        className="mb-4"
        aria-label="Multiple select example"
      />

      {/* Disbaled select */}
      <SelectBox
        type="multiple"
        choices={[
          { value: 'Shopify', label: 'Shopify', selected: true },
          { value: 'WooCommerce', label: 'WooCommerce' },
          { value: 'Magento', label: 'Magento' },
          { value: 'OpenCart', label: 'OpenCart' },
          { value: 'PrestaShop', label: 'PrestaShop' },
          { value: 'VirtueMart', label: 'VirtueMart' },
        ]}
        placeholder="Disabled select"
        aria-label="Disabled multiple select"
        disabled
      />
    </>
  )
}

Tags input

import SelectBox from '@/components/forms/select-box'

export default function SelectBoxTagsInputDemo() {
  return (
    <>
      <SelectBox
        type="text"
        defaultValue="tag-1, tag-2"
        placeholder="Enter something"
        className="mb-4"
        aria-label="Tags input example"
      />

      {/* Disbaled input */}
      <SelectBox
        type="text"
        defaultValue="tag-1, tag-2"
        placeholder="Disabled input"
        aria-label="Disabled tags input"
        disabled
      />
    </>
  )
}

Custom option template

import SelectBox from '@/components/forms/select-box'

export default function SelectBoxCustomOptionDemo() {
  return (
    <>
      <SelectBox
        choices={[
          {
            value: 'English',
            label:
              '<div class="d-flex align-items-center"><img src="/img/flags/en-uk.png" class="flex-shrink-0 me-2" width="20" alt="English"> English</div>',
            selected: true,
          },
          {
            value: 'Français',
            label:
              '<div class="d-flex align-items-center"><img src="/img/flags/fr.png" class="flex-shrink-0 me-2" width="20" alt="Français"> Français</div>',
          },
          {
            value: 'Deutsch',
            label:
              '<div class="d-flex align-items-center"><img src="/img/flags/de.png" class="flex-shrink-0 me-2" width="20" alt="Deutsch"> Deutsch</div>',
          },
          {
            value: 'Italiano',
            label:
              '<div class="d-flex align-items-center"><img src="/img/flags/it.png" class="flex-shrink-0 me-2" width="20" alt="Italiano"> Italiano</div>',
          },
        ]}
        placeholder="Select language"
        className="mb-4"
        aria-label="Select language"
      />

      {/* Explicitely set customTemplate for customProperties.selected value to work as a selected text. */}
        <SelectBox
          customTemplate
          choices={[
            {
              value: '1',
              label: '<span class="visually-hidden">1 star</span>',
              customProperties: {
                icon: '<span class="d-flex gap-1 py-1"><i class="ci-star-filled text-warning"></i></span>',
                selected: '1 star',
              },
            },
            {
              value: '2',
              label: '<span class="visually-hidden">2 stars</span>',
              customProperties: {
                icon: '<span class="d-flex gap-1 py-1"><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i></span>',
                selected: '2 stars',
              },
            },
            {
              value: '3',
              label: '<span class="visually-hidden">3 stars</span>',
              customProperties: {
                icon: '<span class="d-flex gap-1 py-1"><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i></span>',
                selected: '3 stars',
              },
            },
            {
              value: '4',
              label: '<span class="visually-hidden">4 stars</span>',
              customProperties: {
                icon: '<span class="d-flex gap-1 py-1"><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i></span>',
                selected: '4 stars',
              },
            },
            {
              value: '5',
              label: '<span class="visually-hidden">5 stars</span>',
              customProperties: {
                icon: '<span class="d-flex gap-1 py-1"><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i><i class="ci-star-filled text-warning"></i></span>',
                selected: '5 stars',
              },
            },
          ]}
          placeholder="Choose rating"
          aria-label="Choose rating"
        />
    </>
  )
}

Sizes and shapes

import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import SelectBox from '@/components/forms/select-box'

export default function SelectBoxSizesShapesDemo() {
  return (
    <Row xs={1} sm={2} className="g-4">
      {[
        [
          { sizeClass: 'form-select-lg', shapeClass: null, label: 'Large rounded select' },
          { sizeClass: null, shapeClass: null, label: 'Normal rounded select' },
          { sizeClass: 'form-select-sm', shapeClass: null, label: 'Small rounded select' },
        ],
        [
          { sizeClass: 'form-select-lg', shapeClass: 'rounded-pill', label: 'Large pill select' },
          { sizeClass: null, shapeClass: 'rounded-pill', label: 'Normal pill select' },
          { sizeClass: 'form-select-sm', shapeClass: 'rounded-pill', label: 'Small pill select' },
        ],
        [
          { sizeClass: 'form-select-lg', shapeClass: 'rounded-0', label: 'Large square select' },
          { sizeClass: null, shapeClass: 'rounded-0', label: 'Normal square select' },
          { sizeClass: 'form-select-sm', shapeClass: 'rounded-0', label: 'Small square select' },
        ],
      ].map((column, index) => (
        <Col key={index} className="d-flex flex-column gap-3">
          {column.map(({ sizeClass, shapeClass, label }, index) => (
            <SelectBox
              key={index}
              choices={[
                {
                  value: '1',
                  label: 'Option 1',
                },
                {
                  value: '2',
                  label: 'Option 2',
                },
                {
                  value: '3',
                  label: 'Option 3',
                },
              ]}
              inputClassName={`${sizeClass} ${shapeClass}`}
              placeholder="Select option..."
              aria-label={label}
            />
          ))}
        </Col>
      ))}
    </Row>
  )
}