Combobox

import { FormControl, Combobox as _Combobox } from 'sxa-ui'
import { makeHydratable } from '#root/src/islands.jsx'
const Combobox = makeHydratable(_Combobox)

const COMBOBOX_OPTIONS = [
  {
    value: 'Lorem',
    label: 'Lorem',
  },
  {
    value: 'Ipsum dolor',
    label: 'Ipsum dolor',
  },
  {
    value: 'Sit amet 1',
    label: 'Sit amet 1',
    disabled: true,
  },
  {
    value: 'Sit amet 2',
    label: 'Sit amet 2',
    disabled: true,
    selected: true,
  },
  {
    value: 'Consetetur sadipscing',
    label: 'Consetetur sadipscing',
  },
  {
    value: 'Elitr sed diam 1',
    label: 'Elitr sed diam 1',
  },
  {
    value: 'Elitr sed diam 2',
    label: 'Elitr sed diam 2',
  },
]

function Demo() {
  return (
    <FormControl label='Combobox'>
      <Combobox
        name='combobox'
        placeholder='Search something...'
        options={COMBOBOX_OPTIONS}
      />
    </FormControl>
  )
}

export default Demo

import { FormControl, Combobox as _Combobox } from 'sxa-ui'
import { makeHydratable } from '#root/src/islands.jsx'
const Combobox = makeHydratable(_Combobox)

const COMBOBOX_OPTIONS = [
  {
    value: 'Lorem',
    label: 'Lorem',
  },
  {
    value: 'Ipsum dolor',
    label: 'Ipsum dolor',
  },
  {
    value: 'Sit amet 1',
    label: 'Sit amet 1',
    disabled: true,
  },
  {
    value: 'Sit amet 2',
    label: 'Sit amet 2',
    disabled: true,
    selected: true,
  },
  {
    value: 'Consetetur sadipscing',
    label: 'Consetetur sadipscing',
  },
  {
    value: 'Elitr sed diam 1',
    label: 'Elitr sed diam 1',
  },
  {
    value: 'Elitr sed diam 2',
    label: 'Elitr sed diam 2',
  },
]

function Demo() {
  return (
    <FormControl label='Combobox'>
      <Combobox
        name='combobox'
        placeholder='Search something...'
        options={COMBOBOX_OPTIONS}
        disabled
      />
    </FormControl>
  )
}

export default Demo

import { FormControl, Combobox as _Combobox } from 'sxa-ui'
import { makeHydratable } from '#root/src/islands.jsx'
const Combobox = makeHydratable(_Combobox)

const COMBOBOX_OPTIONS = [
  {
    value: 'Lorem',
    label: 'Lorem',
  },
  {
    value: 'Ipsum dolor',
    label: 'Ipsum dolor',
  },
  {
    value: 'Sit amet 1',
    label: 'Sit amet 1',
    disabled: true,
  },
  {
    value: 'Sit amet 2',
    label: 'Sit amet 2',
    disabled: true,
    selected: true,
  },
  {
    value: 'Consetetur sadipscing',
    label: 'Consetetur sadipscing',
  },
  {
    value: 'Elitr sed diam 1',
    label: 'Elitr sed diam 1',
  },
  {
    value: 'Elitr sed diam 2',
    label: 'Elitr sed diam 2',
  },
]

function Demo() {
  return (
    <FormControl label='Combobox'>
      <Combobox
        name='combobox'
        variant={_Combobox.variants.outside}
        placeholder='Search something...'
        options={COMBOBOX_OPTIONS}
      />
    </FormControl>
  )
}

export default Demo

import { FormControl, Combobox as _Combobox } from 'sxa-ui'
import { makeHydratable } from '#root/src/islands.jsx'
const Combobox = makeHydratable(_Combobox)

const COMBOBOX_OPTIONS = [
  {
    value: 'Lorem',
    label: 'Lorem',
  },
  {
    value: 'Ipsum dolor',
    label: 'Ipsum dolor',
  },
  {
    value: 'Sit amet 1',
    label: 'Sit amet 1',
    disabled: true,
  },
  {
    value: 'Sit amet 2',
    label: 'Sit amet 2',
    disabled: true,
    selected: true,
  },
  {
    value: 'Consetetur sadipscing',
    label: 'Consetetur sadipscing',
  },
  {
    value: 'Elitr sed diam 1',
    label: 'Elitr sed diam 1',
  },
  {
    value: 'Elitr sed diam 2',
    label: 'Elitr sed diam 2',
  },
]

function Demo() {
  return (
    <FormControl label='Combobox'>
      <Combobox
        name='combobox'
        variant={_Combobox.variants.outside}
        placeholder='Search something...'
        options={COMBOBOX_OPTIONS}
        disabled
      />
    </FormControl>
  )
}

export default Demo

import { FormControl, Combobox as _Combobox } from 'sxa-ui'
import { makeHydratable } from '#root/src/islands.jsx'
const Combobox = makeHydratable(_Combobox)

const COMBOBOX_OPTIONS = [
  {
    value: 'Lorem',
    label: 'Lorem',
  },
  {
    value: 'Ipsum dolor',
    label: 'Ipsum dolor',
  },
  {
    value: 'Sit amet 1',
    label: 'Sit amet 1',
    disabled: true,
  },
  {
    value: 'Sit amet 2',
    label: 'Sit amet 2',
    disabled: true,
    selected: true,
  },
  {
    value: 'Consetetur sadipscing',
    label: 'Consetetur sadipscing',
  },
  {
    value: 'Elitr sed diam 1',
    label: 'Elitr sed diam 1',
  },
  {
    value: 'Elitr sed diam 2',
    label: 'Elitr sed diam 2',
  },
]

function Demo() {
  return (
    <FormControl label='Combobox'>
      <Combobox
        name='combobox'
        variant={_Combobox.variants.single}
        placeholder='Search something...'
        options={COMBOBOX_OPTIONS}
      />
    </FormControl>
  )
}

export default Demo