Select

Select is a styled HTML Select element. There are no behavior changes applied to the native HTML tag other than light styling done via CSS, and small SVG component in order to keep Selects accessible.

Usage

Select different items from a list.

<div style="position: relative">
  <select class="drac-select drac-select-white">
    <option value="default" disabled="" selected="">Select option</option>
    <option>Blade</option>
    <option>Buffy</option>
    <option>Lincoln</option>
    <option>Morbius</option>
    <option>Van Helsing</option>
  </select>
  <div class="drac-select-arrow drac-text-white">
    <svg
      viewBox="0 0 24 24"
      focusable="false"
      role="presentation"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
      ></path>
    </svg>
  </div>
</div>
<Select defaultValue="default" color="white">
  <option value="default" disabled={true}>
    Select option
  </option>
  <option>Blade</option>
  <option>Buffy</option>
  <option>Lincoln</option>
  <option>Morbius</option>
  <option>Van Helsing</option>
</Select>;

Sizes

Select can be customize to use several different sizes.

<div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-lg drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-sm drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</div>
<div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" size="large" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" size="medium" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" size="small" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
</div>;

Variants

There are two different variations you can use: `normal` and `outline`

<div style="display: flex; flex-direction: column">
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
</div>;

Disabled

A disabled select is unusable and un-clickable.

<div style="display: flex; flex-direction: column">
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select disabled="" class="drac-select drac-select-white">
        <option value="default">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select
        disabled=""
        class="drac-select drac-select-outline drac-select-white"
      >
        <option value="default">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
  <div style={{ marginBottom: 10 }}>
    <Select disabled={true} variant="normal" color="white">
      <option value="default">Select option</option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select disabled={true} variant="outline" color="white">
      <option value="default">Select option</option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
</div>;

Colors

Select can be customized to use any of the Dracula UI theme colors.

<div style="display: flex; flex-direction: column">
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-cyan">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-cyan">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-green">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-green">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-orange">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-orange">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-pink">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-pink">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-purple">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-purple">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-red">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-red">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-outline drac-select-yellow">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-yellow">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-white">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-white">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-cyan">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-cyan">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-green">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-green">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-orange">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-orange">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-pink">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-pink">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-purple">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-purple">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-red">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-red">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px">
    <div style="position: relative">
      <select class="drac-select drac-select-yellow">
        <option value="default" disabled="" selected="">Select option</option>
        <option>Blade</option>
        <option>Buffy</option>
        <option>Lincoln</option>
        <option>Morbius</option>
        <option>Van Helsing</option>
      </select>
      <div class="drac-select-arrow drac-text-yellow">
        <svg
          viewBox="0 0 24 24"
          focusable="false"
          role="presentation"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="cyan">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="green">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="orange">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="pink">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="purple">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="red">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="outline" color="yellow">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="white">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="cyan">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="green">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="orange">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="pink">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="purple">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="red">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
  <div style={{ marginBottom: 10 }}>
    <Select defaultValue="default" variant="normal" color="yellow">
      <option value="default" disabled={true}>
        Select option
      </option>
      <option>Blade</option>
      <option>Buffy</option>
      <option>Lincoln</option>
      <option>Morbius</option>
      <option>Van Helsing</option>
    </Select>
  </div>
</div>;

Properties

color

The Dracula UI theme color for the Select.

"purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"
size

Controls the size of the select based on pre-configured Dracula UI sizes.

number | "large" | "medium" | "small"
variant

The variation to be used for the Select element. `normal` -> Regular Select component with a light background color. `outline` -> Keeps the accent color, but removes the background.

"normal" | "outline"
disabled

A disabled select is unusable and un-clickable.

boolean