Checkboxes

4 components in this section

Basic Checkbox

Checkbox inputs for multi-select options

<label class="dg-checkbox-label">
  <input type="checkbox" class="dg-checkbox" />
  Enable notifications
</label>
import { Checkbox, CheckboxLabel } from '@deepgram/styles/react';

<CheckboxLabel>
  <Checkbox />
  Enable notifications
</CheckboxLabel>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-checkbox-label>
  <dg-checkbox type="checkbox"></dg-checkbox>
  Enable notifications
</dg-checkbox-label>

Checkbox Group

Checkbox inputs for multi-select options

<div class="dg-checkbox-group">
  <label class="dg-checkbox-label">
    <input type="checkbox" class="dg-checkbox" />
    Speech-to-Text
  </label>
  <label class="dg-checkbox-label">
    <input type="checkbox" class="dg-checkbox" />
    Text-to-Speech
  </label>
</div>
import { Checkbox, CheckboxGroup, CheckboxLabel } from '@deepgram/styles/react';

<CheckboxGroup>
  <CheckboxLabel>
    <Checkbox />
    Speech-to-Text
  </CheckboxLabel>
  <CheckboxLabel>
    <Checkbox />
    Text-to-Speech
  </CheckboxLabel>
</CheckboxGroup>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-checkbox-group>
  <dg-checkbox-label>
    <dg-checkbox type="checkbox"></dg-checkbox>
    Speech-to-Text
  </dg-checkbox-label>
  <dg-checkbox-label>
    <dg-checkbox type="checkbox"></dg-checkbox>
    Text-to-Speech
  </dg-checkbox-label>
</dg-checkbox-group>

Disabled Checkbox

Checkbox inputs for multi-select options

<label class="dg-checkbox-label">
  <input type="checkbox" class="dg-checkbox" disabled="true" checked="true" />
  Premium features (requires upgrade)
</label>
import { Checkbox, CheckboxLabel } from '@deepgram/styles/react';

<CheckboxLabel>
  <Checkbox disabled checked />
  Premium features (requires upgrade)
</CheckboxLabel>
<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-checkbox-label>
  <dg-checkbox type="checkbox" disabled="true" checked="true"></dg-checkbox>
  Premium features (requires upgrade)
</dg-checkbox-label>