Home

ds-button.js

The `ds-button` component provides a styled and functional button element. It supports various button types and variants while maintaining accessibility and proper event handling.
Properties:
Name Type Description
type string Gets or sets the type of the button.
disabled boolean Gets or sets the disabled state of the button.
name string Gets or sets the name of the button.
value string Gets or sets the value of the button.
variant string Gets or sets the variant of the button.
Source:

Examples

<!-- Basic button -->
<ds-button>Click me</ds-button>
<!-- Submit button with variant -->
<ds-button type="submit" variant="primary">Submit Form</ds-button>
<!-- Disabled button -->
<ds-button disabled variant="secondary">Disabled Button</ds-button>

Extends

  • HTMLElement

ds-checkbox.js

The `ds-checkbox` component provides a styled and functional checkbox. It supports both single checkboxes and groups of checkboxes for multiple selections.
Properties:
Name Type Description
checked boolean Gets or sets the checked state of the checkbox.
value string Gets or sets the value of the checkbox.
name string Gets or sets the name of the checkbox.
disabled boolean Gets or sets the disabled state of the checkbox.
readonly boolean Gets or sets the readonly state of the checkbox.
required boolean Gets or sets the required state of the checkbox.
Source:

Examples

<!-- Basic checkbox -->
<ds-checkbox name="agree" value="yes" id="agree-terms">I agree to the terms</ds-checkbox>
<!-- Checkbox with default selection -->
<ds-checkbox name="newsletter" value="subscribe" checked>Subscribe to newsletter</ds-checkbox>
<!-- Multiple checkboxes for preferences -->
<ds-checkbox name="preferences" value="email">Email notifications</ds-checkbox>
<ds-checkbox name="preferences" value="sms">SMS notifications</ds-checkbox>
<ds-checkbox name="preferences" value="push">Push notifications</ds-checkbox>

Extends

  • HTMLElement

ds-col.js

The `ds-col` component serves dual purposes: as a flex item within a row and as a flex container for its own children. It exposes both flex item properties (for positioning within parent rows) and flex container properties (for its own children).
Source:

Examples

<!-- A basic column with default flex properties -->
<ds-row>
  <ds-col>
    <div>Content 1</div>
    <div>Content 2</div>
  </ds-col>
</ds-row>
<!-- A column that takes up 2/3 of available space with centered content -->
<ds-row>
  <ds-col flex-grow="2" justify-content="center" align-items="center">
    <div>Main Content</div>
  </ds-col>
  <ds-col flex-grow="1">
    <div>Sidebar</div>
  </ds-col>
</ds-row>
<!-- A column with specific width and gap between items -->
<ds-col flex-basis="300px" gap="16px">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</ds-col>

Extends

  • HTMLElement

ds-fieldset.js

The `ds-fieldset` component provides a styled and functional fieldset element for grouping related form controls together. It creates a visual and semantic grouping that improves form organization and accessibility.
Source:

Examples

<!-- Basic fieldset -->
<ds-fieldset>
  <ds-legend>Personal Information</ds-legend>
  <ds-label for="first-name">First Name</ds-label>
  <ds-text-input id="first-name" name="firstName"></ds-text-input>
  <ds-label for="last-name">Last Name</ds-label>
  <ds-text-input id="last-name" name="lastName"></ds-text-input>
</ds-fieldset>
<!-- Fieldset with radio buttons -->
<ds-fieldset>
  <ds-legend>Gender</ds-legend>
  <ds-radio name="gender" value="male" id="male">Male</ds-radio>
  <ds-radio name="gender" value="female" id="female">Female</ds-radio>
  <ds-radio name="gender" value="other" id="other">Other</ds-radio>
</ds-fieldset>
<!-- Fieldset with checkboxes -->
<ds-fieldset>
  <ds-legend>Interests</ds-legend>
  <ds-checkbox name="interests" value="sports" id="sports">Sports</ds-checkbox>
  <ds-checkbox name="interests" value="music" id="music">Music</ds-checkbox>
  <ds-checkbox name="interests" value="reading" id="reading">Reading</ds-checkbox>
</ds-fieldset>

Extends

  • HTMLElement

ds-label.js

The `ds-label` component provides a styled and functional label element for associating text with form controls. It supports the `for` attribute to create explicit associations with form elements.
Properties:
Name Type Description
htmlFor string Gets or sets the ID of the associated form control.
Source:

Examples

<!-- Basic label -->
<ds-label>Username</ds-label>
<!-- Label with explicit association -->
<ds-label for="username-input">Username</ds-label>
<ds-text-input id="username-input"></ds-text-input>
<!-- Label with form control -->
<ds-label for="email-field">Email Address</ds-label>
<ds-text-input type="email" id="email-field" required></ds-text-input>
<!-- Label with checkbox -->
<ds-label for="agree-terms">I agree to the terms and conditions</ds-label>
<ds-checkbox id="agree-terms" name="agree" value="yes"></ds-checkbox>

Extends

  • HTMLElement

ds-legend.js

The `ds-legend` component provides a styled and functional legend element for providing a caption or title for a fieldset. It should be used within `` components to describe the group of form controls.
Source:

Examples

<!-- Basic legend within fieldset -->
<ds-fieldset>
  <ds-legend>Contact Information</ds-legend>
  <ds-label for="email">Email</ds-label>
  <ds-text-input type="email" id="email" name="email"></ds-text-input>
</ds-fieldset>
<!-- Legend with form controls -->
<ds-fieldset>
  <ds-legend>Shipping Address</ds-legend>
  <ds-label for="street">Street Address</ds-label>
  <ds-text-input id="street" name="street"></ds-text-input>
  <ds-label for="city">City</ds-label>
  <ds-text-input id="city" name="city"></ds-text-input>
  <ds-label for="zip">ZIP Code</ds-label>
  <ds-text-input id="zip" name="zip"></ds-text-input>
</ds-fieldset>
<!-- Legend with radio button group -->
<ds-fieldset>
  <ds-legend>Preferred Contact Method</ds-legend>
  <ds-radio name="contact" value="email" id="contact-email">Email</ds-radio>
  <ds-radio name="contact" value="phone" id="contact-phone">Phone</ds-radio>
  <ds-radio name="contact" value="mail" id="contact-mail">Mail</ds-radio>
</ds-fieldset>

Extends

  • HTMLElement

ds-option.js

The `ds-option` component provides a styled and functional option element for use within `` components. It maintains proper option behavior and can be used as an alternative to native `
Properties:
Name Type Description
value string Gets or sets the value of the option.
selected boolean Gets or sets the selected state of the option.
disabled boolean Gets or sets the disabled state of the option.
Source:

Examples

<!-- Basic option -->
<ds-option value="option1">Option 1</ds-option>
<!-- Pre-selected option -->
<ds-option value="default" selected>Default Option</ds-option>
<!-- Disabled option -->
<ds-option value="disabled" disabled>Disabled Option</ds-option>
<!-- Usage within ds-select -->
<ds-select name="category">
  <ds-option value="electronics">Electronics</ds-option>
  <ds-option value="clothing">Clothing</ds-option>
  <ds-option value="books">Books</ds-option>
</ds-select>

Extends

  • HTMLElement

ds-page.js

The `ds-page` component handles page-level layout and margins, providing a consistent foundation for application pages. It uses CSS custom properties for customization and ensures proper viewport handling.
Source:

Examples

<!-- Basic page wrapper -->
<ds-page>
  <h1>Welcome to My App</h1>
  <p>This content is wrapped in a consistent page layout.</p>
</ds-page>
<!-- Page with nested layout components -->
<ds-page>
  <ds-row justify-content="space-between" align-items="center">
    <ds-col>
      <h1>Page Title</h1>
    </ds-col>
    <ds-col>
      <ds-button>Action</ds-button>
    </ds-col>
  </ds-row>
  <ds-row>
    <ds-col>
      <p>Main content area</p>
    </ds-col>
  </ds-row>
</ds-page>

Extends

  • HTMLElement

ds-radio.js

The `ds-radio` component provides a styled and functional radio button. It maintains proper radio button behavior where only one option in a group can be selected.
Properties:
Name Type Description
checked boolean Gets or sets the checked state of the radio button.
value string Gets or sets the value of the radio button.
name string Gets or sets the name of the radio button.
disabled boolean Gets or sets the disabled state of the radio button.
readonly boolean Gets or sets the readonly state of the radio button.
required boolean Gets or sets the required state of the radio button.
Source:

Examples

<!-- Basic radio button group -->
<ds-radio name="gender" value="male" id="male">Male</ds-radio>
<ds-radio name="gender" value="female" id="female">Female</ds-radio>
<ds-radio name="gender" value="other" id="other">Other</ds-radio>
<!-- Radio button with default selection -->
<ds-radio name="preference" value="option1" checked>Option 1</ds-radio>
<ds-radio name="preference" value="option2">Option 2</ds-radio>
<!-- Disabled radio button -->
<ds-radio name="status" value="inactive" disabled>Inactive</ds-radio>

Extends

  • HTMLElement

ds-row.js

The `ds-row` component provides a flexible container for arranging items in a row. It leverages CSS Flexbox properties, exposing them as attributes for easy configuration.
Source:

Examples

<!-- A basic row with default alignment and spacing -->
<ds-row>
<div>Item 1</div>
<div>Item 2</div>
</ds-row>
<!-- A row with items centered and a specific gap -->
<ds-row justify-content="center" align-items="center" gap="20px">
<div>Centered Item A</div>
<div>Centered Item B</div>
</ds-row>
<!-- A wrapping row with space between items -->
<ds-row justify-content="space-between" wrap>
<div>Long Item 1</div>
<div>Item 2</div>
<div>Another Item 3</div>
<div>Short Item 4</div>
</ds-row>

Extends

  • HTMLElement

ds-select.js

The `ds-select` component provides a styled and functional select dropdown. It supports both single and multiple selection, and can work with both native `
Properties:
Name Type Description
value string Gets or sets the currently selected option's value.
disabled boolean Gets or sets the disabled state of the select.
required boolean Gets or sets the required state of the select.
name string Gets or sets the name of the select.
multiple boolean Gets or sets the multiple selection state.
size number Gets or sets the number of visible options.
Source:

Examples

<!-- Basic select with native options -->
<ds-select name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</ds-select>
<!-- Select with custom ds-option components -->
<ds-select name="category" required>
  <ds-option value="electronics">Electronics</ds-option>
  <ds-option value="clothing">Clothing</ds-option>
  <ds-option value="books">Books</ds-option>
</ds-select>
<!-- Multiple selection select -->
<ds-select name="interests" multiple size="4">
  <ds-option value="sports">Sports</ds-option>
  <ds-option value="music">Music</ds-option>
  <ds-option value="reading">Reading</ds-option>
  <ds-option value="travel">Travel</ds-option>
</ds-select>

Extends

  • HTMLElement

ds-text-input.js

The `ds-text-input` component provides a styled and functional text input field. It mirrors common `` attributes and properties, making it easy to use within forms while leveraging the design system's styling.
Properties:
Name Type Description
value string Gets or sets the current value of the input.
type string Gets or sets the type of the input.
disabled boolean Gets or sets the disabled state of the input.
readonly boolean Gets or sets the readonly state of the input.
required boolean Gets or sets the required state of the input.
Source:

Examples

<!-- Basic text input -->
<ds-text-input placeholder="Enter your name" id="username-input"></ds-text-input>
<ds-label for="username-input">Username</ds-label>
<!-- Password input that is required -->
<ds-text-input type="password" required placeholder="Your password"></ds-text-input>
<!-- Disabled email input with a pre-filled value -->
<ds-text-input type="email" value="example@domain.com" disabled></ds-text-input>

Extends

  • HTMLElement

ds-textarea.js

The `ds-textarea` component provides a styled and functional textarea for multi-line text input. It supports various textarea attributes and properties while maintaining accessibility and proper event handling.
Properties:
Name Type Description
value string Gets or sets the current value of the textarea.
placeholder string Gets or sets the placeholder text of the textarea.
rows number Gets or sets the number of rows in the textarea.
cols number Gets or sets the number of columns in the textarea.
disabled boolean Gets or sets the disabled state of the textarea.
readonly boolean Gets or sets the readonly state of the textarea.
required boolean Gets or sets the required state of the textarea.
name string Gets or sets the name of the textarea.
Source:

Examples

<!-- Basic textarea -->
<ds-textarea placeholder="Enter your message" rows="4" cols="50"></ds-textarea>
<!-- Required textarea with pre-filled value -->
<ds-textarea value="Default text" required rows="6">Enter description</ds-textarea>
<!-- Disabled textarea -->
<ds-textarea value="Read-only content" disabled rows="3"></ds-textarea>

Extends

  • HTMLElement