Toggles

3 components in this section

Basic Toggle

Toggle switches for binary on/off settings

<label class="dg-toggle-label">
  <input type="checkbox" class="dg-toggle" />
  Enable smart formatting
</label>
import { Toggle, ToggleLabel } from '@deepgram/styles/react';

<ToggleLabel>
  <Toggle />
  Enable smart formatting
</ToggleLabel>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-toggle-label>
  <dg-toggle type="checkbox"></dg-toggle>
  Enable smart formatting
</dg-toggle-label>

Toggle Group

Toggle switches for binary on/off settings

<div class="dg-toggle-group">
  <label class="dg-toggle-label">
    <input type="checkbox" class="dg-toggle" checked="true" />
    Smart formatting
  </label>
  <label class="dg-toggle-label">
    <input type="checkbox" class="dg-toggle" />
    Punctuation
  </label>
  <label class="dg-toggle-label">
    <input type="checkbox" class="dg-toggle" checked="true" />
    Diarization
  </label>
</div>
import { Toggle, ToggleGroup, ToggleLabel } from '@deepgram/styles/react';

<ToggleGroup>
  <ToggleLabel>
    <Toggle checked />
    Smart formatting
  </ToggleLabel>
  <ToggleLabel>
    <Toggle />
    Punctuation
  </ToggleLabel>
  <ToggleLabel>
    <Toggle checked />
    Diarization
  </ToggleLabel>
</ToggleGroup>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-toggle-group>
  <dg-toggle-label>
    <dg-toggle type="checkbox" checked="true"></dg-toggle>
    Smart formatting
  </dg-toggle-label>
  <dg-toggle-label>
    <dg-toggle type="checkbox"></dg-toggle>
    Punctuation
  </dg-toggle-label>
  <dg-toggle-label>
    <dg-toggle type="checkbox" checked="true"></dg-toggle>
    Diarization
  </dg-toggle-label>
</dg-toggle-group>

Disabled Toggle

Toggle switches for binary on/off settings

<label class="dg-toggle-label">
  <input type="checkbox" class="dg-toggle" disabled="true" checked="true" />
  Auto-scaling (managed by admin)
</label>
import { Toggle, ToggleLabel } from '@deepgram/styles/react';

<ToggleLabel>
  <Toggle disabled checked />
  Auto-scaling (managed by admin)
</ToggleLabel>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-toggle-label>
  <dg-toggle type="checkbox" disabled="true" checked="true"></dg-toggle>
  Auto-scaling (managed by admin)
</dg-toggle-label>