NativeSelect

---
import { NativeSelect } from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-native-select-plan">Plan</label>
  <NativeSelect id="ex-native-select-plan" name="plan" placeholder="Choose a plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
    <option disabled value="enterprise">Enterprise (contact sales)</option>
    <option value="team">Team</option>
  </NativeSelect>
  <label for="ex-native-select-billing">Billing period</label>
  <NativeSelect
    id="ex-native-select-billing"
    name="billing"
    options={['Monthly', 'Yearly']}
    placeholder="Choose a billing period"
    size="sm"
  />
  <label for="ex-native-select-region">Region</label>
  <NativeSelect
    disabled
    id="ex-native-select-region"
    name="region"
    options={['North America', 'Europe']}
    placeholder="Locked to workspace"
    size="lg"
  />
</div>

import { NativeSelect } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '20rem' }}>
      <label htmlFor="ex-native-select-plan">Plan</label>
      <NativeSelect id="ex-native-select-plan" name="plan" placeholder="Choose a plan">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option disabled value="enterprise">Enterprise (contact sales)</option>
        <option value="team">Team</option>
      </NativeSelect>
      <label htmlFor="ex-native-select-billing">Billing period</label>
      <NativeSelect
        id="ex-native-select-billing"
        name="billing"
        options={['Monthly', 'Yearly']}
        placeholder="Choose a billing period"
        size="sm"
      />
      <label htmlFor="ex-native-select-region">Region</label>
      <NativeSelect
        disabled
        id="ex-native-select-region"
        name="region"
        options={['North America', 'Europe']}
        placeholder="Locked to workspace"
        size="lg"
      />
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 0.75rem; max-width: 20rem;">
  <label for="ex-native-select-plan">Plan</label>
  <lumen-native-select id="ex-native-select-plan" name="plan" placeholder="Choose a plan">
    <option value="free">Free</option>
    <option value="pro">Pro</option>
    <option disabled value="enterprise">Enterprise (contact sales)</option>
    <option value="team">Team</option>
  </lumen-native-select>
  <label for="ex-native-select-billing">Billing period</label>
  <lumen-native-select
    id="ex-native-select-billing"
    name="billing"
    options={['Monthly', 'Yearly']}
    placeholder="Choose a billing period"
    size="sm"></lumen-native-select>
  <label for="ex-native-select-region">Region</label>
  <lumen-native-select
    disabled
    id="ex-native-select-region"
    name="region"
    options={['North America', 'Europe']}
    placeholder="Locked to workspace"
    size="lg"></lumen-native-select>
</div>