Input Groups

2 components in this section

Basic Text Input

Text input fields with labels, placeholders, and validation states

HTML

React

Web Components

<div class="dg-form-field">
  <label class="dg-form-label">Email Address</label>
  <input type="text" class="dg-input" placeholder="you@example.com" />
</div>

import { FormField, FormLabel, Input } from '@deepgram/styles/react';

<FormField>
  <FormLabel>Email Address</FormLabel>
  <Input type="text" placeholder="you@example.com" />
</FormField>

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

<dg-form-field>
  <dg-form-label>Email Address</dg-form-label>
  <dg-input type="text" placeholder="you@example.com"></dg-input>
</dg-form-field>

Input with Helper Text

Text input fields with labels, placeholders, and validation states

HTML

React

Web Components

<div class="dg-form-field">
  <label class="dg-form-label">API Key</label>
  <input type="text" class="dg-input" placeholder="Enter your Deepgram API key" />
  <span class="dg-form-helper">Find your API key in the Deepgram Console</span>
</div>

import { FormField, FormHelper, FormLabel, Input } from '@deepgram/styles/react';

<FormField>
  <FormLabel>API Key</FormLabel>
  <Input type="text" placeholder="Enter your Deepgram API key" />
  <FormHelper>Find your API key in the Deepgram Console</FormHelper>
</FormField>

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

<dg-form-field>
  <dg-form-label>API Key</dg-form-label>
  <dg-input type="text" placeholder="Enter your Deepgram API key"></dg-input>
  <dg-form-helper>Find your API key in the Deepgram Console</dg-form-helper>
</dg-form-field>

Input with Error

Text input fields with labels, placeholders, and validation states

HTML

React

Web Components

<div class="dg-form-field dg-form-field--error">
  <label class="dg-form-label">Email</label>
  <input type="email" class="dg-input" placeholder="you@example.com" value="invalid-email" />
  <span class="dg-form-helper">Please enter a valid email address</span>
</div>

import { FormField, FormHelper, FormLabel, Input } from '@deepgram/styles/react';

<FormField className="dg-form-field--error">
  <FormLabel>Email</FormLabel>
  <Input type="email" placeholder="you@example.com" value="invalid-email" />
  <FormHelper>Please enter a valid email address</FormHelper>
</FormField>

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

<dg-form-field error>
  <dg-form-label>Email</dg-form-label>
  <dg-input type="email" placeholder="you@example.com" value="invalid-email"></dg-input>
  <dg-form-helper>Please enter a valid email address</dg-form-helper>
</dg-form-field>

Disabled Input

Text input fields with labels, placeholders, and validation states

HTML

React

Web Components

<div class="dg-form-field">
  <label class="dg-form-label">Project Name</label>
  <input type="text" class="dg-input" placeholder="Enter project name" disabled="true" value="My Project" />
</div>

import { FormField, FormLabel, Input } from '@deepgram/styles/react';

<FormField>
  <FormLabel>Project Name</FormLabel>
  <Input type="text" placeholder="Enter project name" disabled value="My Project" />
</FormField>

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

<dg-form-field>
  <dg-form-label>Project Name</dg-form-label>
  <dg-input type="text" placeholder="Enter project name" disabled="true" value="My Project"></dg-input>
</dg-form-field>

File Upload Zone

Drag-and-drop file upload area with click-to-browse

HTML

React

Web Components

<div class="dg-drag-drop-zone">
  <input type="file" class="dg-drag-drop-zone__input" />
  <i class="fas fa-cloud-upload-alt dg-drag-drop-zone__icon"></i>
  <p class="dg-drag-drop-zone__text">Drop files here or click to browse</p>
  <p class="dg-drag-drop-zone__hint">Supports MP3, WAV, FLAC up to 100MB</p>
</div>

import { DragDropZone, DragDropZoneHint, DragDropZoneIcon, DragDropZoneInput, DragDropZoneText } from '@deepgram/styles/react';

<DragDropZone>
  <DragDropZoneInput />
  <DragDropZoneIcon name="cloud-upload-alt" />
  <DragDropZoneText>Drop files here or click to browse</DragDropZoneText>
  <DragDropZoneHint>Supports MP3, WAV, FLAC up to 100MB</DragDropZoneHint>
</DragDropZone>

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

<dg-drag-drop-zone>
  <input type="file" class="dg-drag-drop-zone__input" />
  <i class="fas fa-cloud-upload-alt dg-drag-drop-zone__icon"></i>
  <p class="dg-drag-drop-zone__text">Drop files here or click to browse</p>
  <p class="dg-drag-drop-zone__hint">Supports MP3, WAV, FLAC up to 100MB</p>
</dg-drag-drop-zone>