Soracom

Design System
  1. Home
  2. Design system
  3. Web components
  4. Required

Required

DS Required component for marking required form fields

Overview

ds-required is a simple Web Component that renders a required field indicator (*). It outputs an <abbr> element with the appropriate SDS class and a title attribute for accessibility.

Usage

Place <ds-required> next to a field label to indicate the field is required.

html
Copy 
<script type="module" src="https://assets.soracom.io/sds/beta/ds-required/index.mjs"></script>

<label class="ds-field">
  <div class="ds-text --label">Name <ds-required></ds-required></div>
  <input class="ds-input" type="text" />
</label>

Output

The component renders the following HTML:

<abbr class="--required" title="required">*</abbr>

Attributes

AttributeValuesDefaultDescription
css"shadow"Light DOMSet to "shadow" to use Shadow DOM with self-loaded SDS stylesheets. By default, the component uses Light DOM and relies on globally loaded SDS styles.