Components

Form

Submits its fields and reports success without a reload.

Usage

Basic

HTML

<bs:bsui-form successMessage="Thanks, you are on the list.">
  <bs:bsui-field>
    <bs:bsui-field-label text="Email" />
    <bs:bsui-input type="email" placeholder="you@example.com" />
  </bs:bsui-field>
  <bs:bsui-button label="Subscribe" />
</bs:bsui-form>

Complete form

A support request built from grouped fields of every kind, ending in a submit button.

HTML

<bs:bsui-form block="app/support-ticket" successMessage="Your ticket is in. We reply within one working day.">
  <bs:bsui-stack direction="column" gap="4" align="stretch">
    <bs:bsui-field-group variant="card">
      <bs:bsui-field-group-title text="Contact" />
      <bs:bsui-field-group-description text="How we reach you about this ticket." />
      <bs:bsui-field-group-content>
        <bs:bsui-field name="name">
          <bs:bsui-field-label text="Full name" />
          <bs:bsui-input name="name" placeholder="Ada Lovelace" required="true" />
          <bs:bsui-field-error />
        </bs:bsui-field>
        <bs:bsui-field name="email">
          <bs:bsui-field-label text="Work email" />
          <bs:bsui-input type="email" name="email" placeholder="ada@example.com" required="true" />
          <bs:bsui-field-description text="Replies go to this address only." />
          <bs:bsui-field-error />
        </bs:bsui-field>
      </bs:bsui-field-group-content>
    </bs:bsui-field-group>
    <bs:bsui-field-group variant="card">
      <bs:bsui-field-group-title text="Request" />
      <bs:bsui-field-group-description text="Tell us what broke and how urgent it is." />
      <bs:bsui-field-group-content>
        <bs:bsui-field name="product">
          <bs:bsui-field-label text="Product" />
          <bs:bsui-select name="product" defaultValue="blockstudio" placeholder="Pick a product">
            <bs:bsui-select-trigger />
            <bs:bsui-select-popup>
              <bs:bsui-select-option value="blockstudio" label="Blockstudio" />
              <bs:bsui-select-option value="sleekrank" label="SleekRank" />
              <bs:bsui-select-option value="sleekai" label="SleekAI" />
            </bs:bsui-select-popup>
          </bs:bsui-select>
          <bs:bsui-field-error />
        </bs:bsui-field>
        <bs:bsui-field name="priority">
          <bs:bsui-field-label text="Priority" />
          <bs:bsui-radio-group name="priority" defaultValue="normal" orientation="horizontal">
            <bs:bsui-radio value="low" label="Low" />
            <bs:bsui-radio value="normal" label="Normal" />
            <bs:bsui-radio value="urgent" label="Urgent" />
          </bs:bsui-radio-group>
          <bs:bsui-field-error />
        </bs:bsui-field>
        <bs:bsui-field name="details">
          <bs:bsui-field-label text="What happened?" />
          <bs:bsui-textarea name="details" rows="4" placeholder="What you did, what you expected, what you got instead." />
          <bs:bsui-field-description text="Paste any error message you saw." />
          <bs:bsui-field-error />
        </bs:bsui-field>
        <bs:bsui-field>
          <bs:bsui-checkbox name="logs" value="yes" label="Attach my recent error log" defaultChecked="true" />
        </bs:bsui-field>
      </bs:bsui-field-group-content>
    </bs:bsui-field-group>
    <bs:bsui-stack direction="row" gap="3" align="center" justify="space-between">
      <bs:bsui-text content="We reply within one working day." variant="muted" />
      <bs:bsui-button label="Send ticket" />
    </bs:bsui-stack>
  </bs:bsui-stack>
</bs:bsui-form>

Server errors

An empty field error is the slot the form fills with whatever the server rejected.

HTML

<bs:bsui-form block="app/account" successMessage="Account created. Check your inbox to confirm it.">
  <bs:bsui-stack direction="column" gap="4" align="stretch">
    <bs:bsui-field name="username">
      <bs:bsui-field-label text="Username" />
      <bs:bsui-input name="username" placeholder="ada" required="true" />
      <bs:bsui-field-description text="Letters, numbers and dashes." />
      <bs:bsui-field-error />
    </bs:bsui-field>
    <bs:bsui-field name="email">
      <bs:bsui-field-label text="Email" />
      <bs:bsui-input type="email" name="email" placeholder="ada@example.com" required="true" />
      <bs:bsui-field-error />
    </bs:bsui-field>
    <bs:bsui-field name="password">
      <bs:bsui-field-label text="Password" />
      <bs:bsui-input type="password" name="password" required="true" />
      <bs:bsui-field-description text="At least twelve characters." />
      <bs:bsui-field-error />
    </bs:bsui-field>
    <bs:bsui-button label="Create account" />
  </bs:bsui-stack>
</bs:bsui-form>

Submitting state

While a submit is in flight the action row locks, so pair the button with a spinner.

HTML

<bs:bsui-form block="app/invite" successMessage="Invitation sent.">
  <bs:bsui-stack direction="column" gap="4" align="stretch">
    <bs:bsui-field>
      <bs:bsui-field-label text="Teammate email" />
      <bs:bsui-input type="email" name="email" defaultValue="grace@example.com" required="true" />
    </bs:bsui-field>
    <bs:bsui-stack direction="row" gap="2" align="center">
      <bs:bsui-button label="Sending invite" disabled="true" />
      <bs:bsui-spinner size="sm" label="Sending" />
    </bs:bsui-stack>
  </bs:bsui-stack>
</bs:bsui-form>

Delete action

The delete action sends the record named id, so the form only needs that one field.

HTML

<bs:bsui-form block="app/project" action="delete" successMessage="The project has been deleted.">
  <bs:bsui-stack direction="column" gap="4" align="stretch">
    <bs:bsui-field-group variant="card">
      <bs:bsui-field-group-title text="Danger zone" />
      <bs:bsui-field-group-description text="Deleting a project removes every build it ever produced." />
      <bs:bsui-field-group-content>
        <bs:bsui-field>
          <bs:bsui-field-label text="Project ID" />
          <bs:bsui-input name="id" defaultValue="482" />
          <bs:bsui-field-description text="The record the delete action is sent for." />
        </bs:bsui-field>
      </bs:bsui-field-group-content>
    </bs:bsui-field-group>
    <bs:bsui-button label="Delete project" variant="destructive" />
  </bs:bsui-stack>
</bs:bsui-form>

Attributes

Attribute	Type	Default
`block`	`text`	—
`action`	`create` `update` `delete`	`create`
`successMessage`	`text`	`Submitted successfully.`