---
title: Select
desc: Form element that allows users to to pick a value from a list of options.
ico: mdi:form-select
keywords:
  - input
  - option
  - dropdown

props:
  - class: .prs-select
    type: modifier
    desc: For use with select tag. This is meant to be used along side .prs-input

alert:
  ico: mdi:warning
  body: |
    **Note:**  
    This is a modifier of **.prs-input**. Please use [input](../input/) properties and then stack **.prs-select** on top just for **select** tags.

controls:
  - name: variant
    type: radio
    label: Variant
    desc: Ghost is border-less and background-less. Alternate display for extreme cases.
    default: default
    options:
      - default
      - ghost

  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup.
    default: default
    options:
      - default
      - focus
      - disabled

preview: |
  <div class="prs-form-control w-xl max-w-xs">
    <select
      id="preview-select"
      class="prs-input prs-select"
      :class="{
        'prs-input-ghost': variant === 'ghost',
        'prs-input_hover': state === 'hover',
        'prs-input_focus': state === 'focus',
      }"
      :disabled="state === 'disabled'"
    >
      <option selected disabled>Choose:</option>
      <template x-for="i in 3">
        <option x-text="'Option '+ i"></option>
      </template>
    </select>
  </div>

code:
  html: |
    <select id="UNIQUE_ID" class="prs-input prs-select{variant}{state}"{disabled}>
      <option selected disabled>Choose:</option>
      <option value="1">Option</option>
    </select>
  logic:
    variant: "this.variant !== 'default' ? (' prs-input-'+ this.variant) : ''"
    state: "this.state === 'focus' ? ' prs-input_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"
---