Skip to content

select

select enables EarlyBird users to effortlessly choose a value from the available options.

Example usage

json
[
  {
    name: 'features',
    title: 'Features',
    fields: [
      {
        name: 'align',
        title: 'Align',
        type: 'select',
        options: [
          {
            label: 'Left',
            value: 'left'
          },
          {
            label: 'Right',
            value: 'right'
          }
        ],
        default: 'left'
      }
    ]
  }
]
[
  {
    name: 'features',
    title: 'Features',
    fields: [
      {
        name: 'align',
        title: 'Align',
        type: 'select',
        options: [
          {
            label: 'Left',
            value: 'left'
          },
          {
            label: 'Right',
            value: 'right'
          }
        ],
        default: 'left'
      }
    ]
  }
]
jsx
<div id="features">
  <div
    className={`feature ${features.align === 'right' ? 'feature-right' : ''}`}
  >
    {(() => {
      switch (features.align) {
        case 'left':
          return <div>Align Left</div>

        case 'right':
          return <div>Align Right</div>

        default:
          return null
      }
    })()}
  </div>
</div>
<div id="features">
  <div
    className={`feature ${features.align === 'right' ? 'feature-right' : ''}`}
  >
    {(() => {
      switch (features.align) {
        case 'left':
          return <div>Align Left</div>

        case 'right':
          return <div>Align Right</div>

        default:
          return null
      }
    })()}
  </div>
</div>

options

Type: Array

label

Type: string

The title of the select option.

value

Type: string

The value of the select option.

Preview

Earlybird Builder