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

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.