Radio Groups

4 components in this section

Basic Radio

Radio button inputs for single-select options

HTML

React

Web Components

<label class="dg-radio-label">
  <input type="radio" class="dg-radio" name="basic-radio" />
  Enable notifications
</label>

import { Radio, RadioLabel } from '@deepgram/styles/react';

<RadioLabel>
  <Radio name="basic-radio" />
  Enable notifications
</RadioLabel>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-radio-label>
  <dg-radio type="radio" name="basic-radio"></dg-radio>
  Enable notifications
</dg-radio-label>

Radio Group

Radio button inputs for single-select options

HTML

React

Web Components

<div class="dg-radio-group">
  <label class="dg-radio-label">
    <input type="radio" class="dg-radio" name="output-format" checked="true" />
    <div class="dg-radio-description">
      JSON
      <span class="dg-radio-description__hint">Structured response with metadata</span>
    </div>
  </label>
  <label class="dg-radio-label">
    <input type="radio" class="dg-radio" name="output-format" />
    <div class="dg-radio-description">
      Plain Text
      <span class="dg-radio-description__hint">Transcript text only</span>
    </div>
  </label>
  <label class="dg-radio-label">
    <input type="radio" class="dg-radio" name="output-format" />
    <div class="dg-radio-description">
      SRT
      <span class="dg-radio-description__hint">Subtitle format with timestamps</span>
    </div>
  </label>
</div>

import { Radio, RadioDescription, RadioDescriptionHint, RadioGroup, RadioLabel } from '@deepgram/styles/react';

<RadioGroup>
  <RadioLabel>
    <Radio name="output-format" checked />
    <RadioDescription>
      JSON
      <RadioDescriptionHint>Structured response with metadata</RadioDescriptionHint>
    </RadioDescription>
  </RadioLabel>
  <RadioLabel>
    <Radio name="output-format" />
    <RadioDescription>
      Plain Text
      <RadioDescriptionHint>Transcript text only</RadioDescriptionHint>
    </RadioDescription>
  </RadioLabel>
  <RadioLabel>
    <Radio name="output-format" />
    <RadioDescription>
      SRT
      <RadioDescriptionHint>Subtitle format with timestamps</RadioDescriptionHint>
    </RadioDescription>
  </RadioLabel>
</RadioGroup>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-radio-group>
  <dg-radio-label>
    <dg-radio type="radio" name="output-format" checked="true"></dg-radio>
    <dg-radio-description>
      JSON
      <span class="dg-radio-description__hint">Structured response with metadata</span>
    </dg-radio-description>
  </dg-radio-label>
  <dg-radio-label>
    <dg-radio type="radio" name="output-format"></dg-radio>
    <dg-radio-description>
      Plain Text
      <span class="dg-radio-description__hint">Transcript text only</span>
    </dg-radio-description>
  </dg-radio-label>
  <dg-radio-label>
    <dg-radio type="radio" name="output-format"></dg-radio>
    <dg-radio-description>
      SRT
      <span class="dg-radio-description__hint">Subtitle format with timestamps</span>
    </dg-radio-description>
  </dg-radio-label>
</dg-radio-group>

Disabled Radio

Radio button inputs for single-select options

HTML

React

Web Components

<label class="dg-radio-label">
  <input type="radio" class="dg-radio" name="disabled-radio" disabled="true" checked="true" />
  Enterprise plan (contact sales)
</label>

import { Radio, RadioLabel } from '@deepgram/styles/react';

<RadioLabel>
  <Radio name="disabled-radio" disabled checked />
  Enterprise plan (contact sales)
</RadioLabel>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-radio-label>
  <dg-radio type="radio" name="disabled-radio" disabled="true" checked="true"></dg-radio>
  Enterprise plan (contact sales)
</dg-radio-label>