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

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.