Plan

Overview

ds-plan is a simple self-contained Web Component for showing a Soracom plan tag. The component will sanitize the plan text, and display the correctly formatted official plan name and color.

Options

Simply include the plan name inside the ds-plan element.

<ds-plan>[plan name]</ds-plan>

html

Copy

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

<ds-plan>planUSmax</ds-plan>

<ds-plan plan="[plan name]"></ds-plan>

html

Copy

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

<ds-plan plan="planUSmax"></ds-plan>

<ds-plan plan="planUSmax" bundle="X3-5MB"></ds-plan>

Inline usage

The ds-plan component can be used inline within text, automatically matching the surrounding font size.

html

Copy

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

<ds-plan>planUSmax</ds-plan>
<ds-plan>plan-USmax</ds-plan>

<p>
  By default, each <ds-plan>plan01s</ds-plan> SIM is preprogrammed with an
  operator profile from Soracom, which includes a corresponding
  <ds-plan>plan01s</ds-plan> subscription plan. When your device connects to a
  cellular network, it uses the information stored in this subscription plan,
  such as Subscriber Identity (IMSI) and authentication keys, to authenticate
  itself.
</p>

<p style="font-size: 16px;">
  By default, each <ds-plan>plan01s</ds-plan> SIM is preprogrammed with an
  operator profile from Soracom, which includes a corresponding
  <ds-plan>plan01s</ds-plan> subscription plan. When your device connects to a
  cellular network, it uses the information stored in this subscription plan,
  such as Subscriber Identity (IMSI) and authentication keys, to authenticate
  itself.
</p>

Sizing

html

Copy

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

<ds-plan size="xsmall">planUSmax</ds-plan>
<ds-plan size="small">planUSmax</ds-plan>
<ds-plan>planUSmax</ds-plan>
<ds-plan size="medium">planUSmax</ds-plan>
<ds-plan size="large">planUSmax</ds-plan>

Bundle

html

Copy

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

<ds-plan bundle="5GB">planUS</ds-plan>
<ds-plan bundle="100MB">plan X3-EU</ds-plan>

Checkbox

Use type="checkbox" to render a checkbox input inside the plan tag, allowing users to select plans in a form.

html

Copy

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

<ds-plan type="checkbox" plan="planUS"></ds-plan>
<ds-plan type="checkbox" plan="planK"></ds-plan>
<ds-plan type="checkbox" plan="planX3"></ds-plan>

Radio

Use type="radio" with a shared name attribute to create a radio group, allowing users to select a single plan.

html

Copy

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

<ds-plan type="radio" name="selected-plan" plan="planUS"></ds-plan>
<ds-plan type="radio" name="selected-plan" plan="planK"></ds-plan>
<ds-plan type="radio" name="selected-plan" plan="planX3"></ds-plan>

Attributes

Attribute	Values	Default	Description
`plan`	Plan name string	—	Sets the plan name via attribute instead of inner text.
`size`	`xsmall`, `small`, `medium`, `large`	—	Controls the size of the plan tag.
`bundle`	Bundle label string	—	Displays a bundle label alongside the plan name.
`type`	`checkbox`, `radio`	—	Renders an input element inside the tag for use in forms.
`name`	Input name string	—	Sets the `name` attribute on the internal input. Use a shared name across radio-type plans to create a radio group.
`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.