Components

Field

Wraps one control with its label, description, and error.

Usage

Basic

Email address We only use this for receipts.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Email address" />
  <bs:bsui-input type="email" placeholder="you@example.com" />
  <bs:bsui-field-description text="We only use this for receipts." />
</bs:bsui-field>

Invalid state

Marking the field invalid recolours the control and shows the message underneath.

Work email Enter an address with a domain, like ada@example.com.

HTML

<bs:bsui-field invalid="true">
  <bs:bsui-field-label text="Work email" />
  <bs:bsui-input type="email" defaultValue="ada@example" />
  <bs:bsui-field-error text="Enter an address with a domain, like ada@example.com." />
</bs:bsui-field>

Required

Help text is where the requirement is spelled out, so the label stays short.

Workspace name Required. This name appears on every invoice.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Workspace name" />
  <bs:bsui-input placeholder="Acme Production" required="true" />
  <bs:bsui-field-description text="Required. This name appears on every invoice." />
</bs:bsui-field>

Disabled

Disable the field and the control inside it, so the whole row reads as locked.

Workspace URL The URL is fixed once the workspace is created.

HTML

<bs:bsui-field disabled="true">
  <bs:bsui-field-label text="Workspace URL" />
  <bs:bsui-input defaultValue="acme.blockstudio.dev" disabled="true" />
  <bs:bsui-field-description text="The URL is fixed once the workspace is created." />
</bs:bsui-field>

Choice field

A field wraps grouped controls the same way it wraps a single input.

Deploy target

Staging

Production

Pick a target before deploying.

HTML

<bs:bsui-field invalid="true">
  <bs:bsui-field-label text="Deploy target" />
  <bs:bsui-radio-group orientation="horizontal">
    <bs:bsui-radio value="staging" label="Staging" />
    <bs:bsui-radio value="production" label="Production" />
  </bs:bsui-radio-group>
  <bs:bsui-field-error text="Pick a target before deploying." />
</bs:bsui-field>

Anatomy

Field is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/field
bsui/field-description
bsui/field-error
bsui/field-label

Attributes

Attribute	Type	Default
`name`	`text`	—
`invalid`	`toggle`	`false`
`disabled`	`toggle`	`false`

`bsui/field-description`

Attribute	Type	Default
`text`	`richtext`	—

`bsui/field-error`

Attribute	Type	Default
`text`	`richtext`	—

`bsui/field-label`

Attribute	Type	Default
`text`	`richtext`	—