Select Menus

2 components in this section

Basic Select

Dropdown select menus for choosing from a list of options

<div class="dg-form-field">
  <label class="dg-form-label">Language</label>
  <select class="dg-select">
    <option class="dg-option" value="" disabled="true" selected="true">Select a language</option>
    <option class="dg-option" value="en">English</option>
    <option class="dg-option" value="es">Spanish</option>
    <option class="dg-option" value="fr">French</option>
    <option class="dg-option" value="de">German</option>
  </select>
</div>
import { FormField, FormLabel, Option, Select } from '@deepgram/styles/react';

<FormField>
  <FormLabel>Language</FormLabel>
  <Select>
    <Option value="" disabled selected>Select a language</Option>
    <Option value="en">English</Option>
    <Option value="es">Spanish</Option>
    <Option value="fr">French</Option>
    <Option value="de">German</Option>
  </Select>
</FormField>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-form-field>
  <dg-form-label>Language</dg-form-label>
  <dg-select>
    <dg-option value="" disabled="true" selected="true">Select a language</dg-option>
    <dg-option value="en">English</dg-option>
    <dg-option value="es">Spanish</dg-option>
    <dg-option value="fr">French</dg-option>
    <dg-option value="de">German</dg-option>
  </dg-select>
</dg-form-field>

Select with Helper Text

Dropdown select menus for choosing from a list of options

<div class="dg-form-field">
  <label class="dg-form-label">Model</label>
  <select class="dg-select">
    <option class="dg-option" value="nova-3" selected="true">Nova 3</option>
    <option class="dg-option" value="nova-2">Nova 2</option>
    <option class="dg-option" value="enhanced">Enhanced</option>
    <option class="dg-option" value="base">Base</option>
  </select>
  <span class="dg-form-helper">Choose the speech recognition model for your project</span>
</div>
import { FormField, FormHelper, FormLabel, Option, Select } from '@deepgram/styles/react';

<FormField>
  <FormLabel>Model</FormLabel>
  <Select>
    <Option value="nova-3" selected>Nova 3</Option>
    <Option value="nova-2">Nova 2</Option>
    <Option value="enhanced">Enhanced</Option>
    <Option value="base">Base</Option>
  </Select>
  <FormHelper>Choose the speech recognition model for your project</FormHelper>
</FormField>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-form-field>
  <dg-form-label>Model</dg-form-label>
  <dg-select>
    <dg-option value="nova-3" selected="true">Nova 3</dg-option>
    <dg-option value="nova-2">Nova 2</dg-option>
    <dg-option value="enhanced">Enhanced</dg-option>
    <dg-option value="base">Base</dg-option>
  </dg-select>
  <dg-form-helper>Choose the speech recognition model for your project</dg-form-helper>
</dg-form-field>

Disabled Select

Dropdown select menus for choosing from a list of options

<div class="dg-form-field">
  <label class="dg-form-label">Region</label>
  <select class="dg-select" disabled="true">
    <option class="dg-option" value="us" selected="true">United States</option>
  </select>
</div>
import { FormField, FormLabel, Option, Select } from '@deepgram/styles/react';

<FormField>
  <FormLabel>Region</FormLabel>
  <Select disabled>
    <Option value="us" selected>United States</Option>
  </Select>
</FormField>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-form-field>
  <dg-form-label>Region</dg-form-label>
  <dg-select disabled="true">
    <dg-option value="us" selected="true">United States</dg-option>
  </dg-select>
</dg-form-field>