Select

import { Select } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Select
        label='label'
        placeholder='Choose one...'
        optional='(Optional)'
      >
        {[1, 2, 3, 4, 5].map((option) => {
          return <option value={option} key={option}>{option}</option>
        })}
      </Select>
      <Select label='label' optional='(Optional)'>
        {[1, 2, 3, 4, 5].map((option) => {
          return <option value={option} key={option}>{option}</option>
        })}
      </Select>
    </div>
  )
}

export default Demo

import { Select } from 'marketing-ui'

function Demo() {
  return (
    <Select label='label' required placeholder='Choose one...' disabled>
      {[1, 2, 3, 4, 5].map((option) => {
        return <option value={option} key={option}>{option}</option>
      })}
    </Select>
  )
}

export default Demo

import { Select } from 'marketing-ui'

function Demo() {
  return (
    <Select
      label='label'
      required
      placeholder='Choose one...'
      error='Please select one option'
    >
      {[1, 2, 3, 4, 5].map((option) => {
        return <option value={option} key={option}>{option}</option>
      })}
    </Select>
  )
}

export default Demo