# ComponentSelect

On click input select field with dropdown

# Most common usage scenario

<template>
  <SfComponentSelect
    v-model="selected"
    :class="customClass"
    :label="label"
    :size="size"
    :required="required"
    :valid="valid"
    :disabled="disabled"
    :error-message="errorMessage"
    :persistent="persistent"
    style="max-width: 30rem;"
  >
    <SfComponentSelectOption
      v-for="(option, key) in options"
      :key="key"
      :value="option.value"
    >
      <SfProductOption
        :color="option.color"
        :label="option.label"
      ></SfProductOption>
    </SfComponentSelectOption>
  </SfComponentSelect>
</template>
<script>
import { SfComponentSelect } from "@storefront-ui/vue";
import { SfProductOption } from "@storefront-ui/vue";
export default {
  components: {
    SfComponentSelect,
    SfProductOption,
  },
  data() {
    return {
      options: [
        { value: "amaranth", color: "#E52B50", label: "Amaranth" },
        { value: "amber", color: "#FFBF00", label: "Amber" },
        { value: "arctic-lime", color: "#D0FF14", label: "Arctic lime" },
        { value: "bluetiful", color: "#3C69E7", label: "Bluetiful" },
        { value: "buff", color: "#F0DC82", label: "Buff" },
      ],
      label: "Color",
      size: 5,
      required: false,
      valid: true,
      disabled: false,
      errorMessage: "Color",
      persistent: false,
    };
  },
};
</script>

# Props

  • label

    • Select field label
    • type: string
    • defaultValue: ""
  • selected

    • Selected item value
    • type: string|number|object
    • defaultValue: ""
  • size

    • Dropdown list size
    • type: number
    • defaultValue: 5
  • required

    • Required attribute
    • type: boolean
    • defaultValue: false
  • valid

    • Validate value of form select
    • type: boolean
    • defaultValue: true
  • disabled

    • Disabled status of form select
    • type: boolean
    • defaultValue: false
  • errorMessage

    • Error message value of form select. It will be appeared if valid is true.
    • type: string
    • defaultValue: "This field is not correct."
  • persistent

    • If true clicking outside will not dismiss the select
    • type: boolean
    • defaultValue: false

# Slots

  • label

  • icon

  • default

  • cancel

  • error-message

    • Custom error message of form select
    • bindings: errorMessage

# Events

  • change

# CSS modifiers

  • .sf-component-select-option--is-active
  • .sf-component-select--underlined
  • .sf-component-select--is-selected
  • .sf-component-select--is-invalid
  • .sf-component-select--is-active
  • .sf-component-select--is-disabled
  • .sf-component-select--is-required
  • .sf-component-select--no-chevron

# CSS custom properties (variables)

  • --component-select-option-padding
  • --component-select-option-border
  • --component-select-option-border-width
  • --component-select-option-background
  • --component-select-option-font
  • --component-select-option-font-weight
  • --component-select-option-font-size
  • --component-select-option-font-line-height
  • --component-select-option-font-family

# Overridden other components CSS variables

  • --chevron-position
  • --product-option-font
  • --font-size--lg
  • --component-select-border-color
  • --button-background
  • --button-color
  • --component-select-border-width
  • --component-select-label-top
  • --component-select-label-font
  • --font-size--xs
  • --chevron-color
  • --component-select-label-color
  • --component-select-color
  • --component-select-label-required
  • --chevron-display
  • --component-select-dropdown-position
  • --component-select-dropdown-top
  • --component-select-dropdown-bottom
  • --component-select-animation-enter
  • --component-select-animation-leave

You can override CSS variables values bound to this component.

# Internal components

# ComponentSelectOption

# Props

  • value
    • type: string|number|object
    • defaultValue: ""

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

See all available configurations and play with this component on Storybook.