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

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

html

Copy

Inline usage

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

html

Copy

Sizing

html

Copy

Bundle

html

Copy

Checkbox

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

html

Copy

Radio

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

html

Copy

Supported plans

Plan key	Name	Color	Example
`plan01s`	plan01s	`--color-gray-600`	plan01s
`plan01sldv`	plan01s - LDV	`--color-gray-600`	plan01s - LDV
`plan01slowdatavolume`	plan01s - Low Data Volume	`--color-gray-600`	plan01s - Low Data Volume
`pland`	plan-D	`--color-gray-200`	plan-D
`planddatasms`	plan-D (Data/SMS)	`--color-gray-200`	plan-D (Data/SMS)
`planddataonly`	plan-D (Data-only)	`--color-gray-200`	plan-D (Data-only)
`plandu`	plan-DU	`--color-gray-200`	plan-DU
`plank`	plan-K	`--color-orange-300`	plan-K
`plank2`	plan-K2	`--color-celeste-400`	plan-K2
`plankm1`	plan-KM1	`--color-celeste-400`	plan-KM1
`planmc`	plan-MC	`--color-red-600`	plan-MC
`planmu`	plan-MU	`--color-red-600`	plan-MU
`plannt1`	planNT1	`--color-green-400`	planNT1
`planp1`	planP1	`--color-purple-400`	planP1
`planus`	plan-US	`--color-blue-600`	plan-US
`planusmax`	plan-US-max	`--color-blue-600`	plan-US-max
`planusna`	plan-US-NA	`--color-blue-600`	plan-US-NA
`planx1`	planX1	`--color-red-300`	planX1
`planx2`	planX2	`--color-blue-300`	planX2
`planx3`	planX3	`--color-orange-300`	planX3
`planx3eu`	planX3-EU	`--color-orange-300`	planX3-EU
`planxm1`	planXM1	`--color-red-300`	planXM1

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.

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-plan/manifest.json

manifest.json

Copy

plans

Supported SORACOM plan keys, display names, and color classes.

Source: https://assets.soracom.io/sds/latest/ds-plan/plans.json

plans.json

Copy