- Home
- Design system
- Web components
- 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
| Attribute | Values | Default | Description |
|---|---|---|---|
css | "shadow" | Light DOM | Set 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. |
Manifest
The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/latest/ds-required/index.mjs
index.mjs
Copy