Form

Our form controls.

These can be implemented via classnames, or with Sass modules using @use.

Using as a Sass module:

@use "@wbez/ferris-ds/assets/scss/9-form" as ds with ($includeStyles: false);
input[type="checkbox"] { @include ds.checkbox; }

@TODO: Document forwarded variables/themes

Checkbox

The checkbox input. Wrap around the <input type="checkbox"> HTML element.

Implement:

Via classname: <div class="wbz-checkbox">
Via @use: input[type="checkbox"] { @include ds.checkbox; }

Optionally animate the checkmark:

Via classname modifier: <div class="wbz-checkbox is-animated">
Via @use: input[type="checkbox"] { @include ds.checkbox($animate: true); }

.wbz-checkbox

Standalone

This gift is in honor of someone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum. This gift is in honor of someone.

HTML Example

<div class="ds-control-group wbz-checkbox {{ className }}">
  <input
    type="checkbox"
    id="ds-checkbox-{{ index }}"
    name="ds_checkbox[Y]"
    value="Y"
  />
  <label for="ds-checkbox-{{ index }}">
    This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

{% if not className %}
<div class="ds-control-group wbz-checkbox {{ className }}">
  <input
    type="checkbox"
    id="ds-checkbox-{{ index }}--checked"
    name="ds_checkbox[Y]"
    value="Y"
    checked
  />
  <label for="ds-checkbox-{{ index }}--checked">
    This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-checkbox {{ className }}">
  <input
    type="checkbox"
    id="ds-checkbox-{{ index }}--disabled"
    name="ds_checkbox[Y]"
    value="Y"
    disabled
  />
  <label for="ds-checkbox-{{ index }}--disabled">
    This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-checkbox {{ className }}">
  <input
    type="checkbox"
    id="ds-checkbox-{{ index }}--disabled-checked"
    name="ds_checkbox[Y]"
    value="Y"
    checked
    disabled
  />
  <label for="ds-checkbox-{{ index }}--disabled-checked">
    This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-checkbox {{ className }}">
  <input
    type="checkbox"
    id="ds-checkbox-{{ index }}--long"
    name="ds_checkbox[Y]"
    value="Y"
  />
  <label for="ds-checkbox-{{ index }}--long">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi
    in efficitur euismod, lorem neque fermentum elit, pharetra elementum. This
    gift is in honor of <a href="#">someone</a>.
  </label>
</div>
{% endif %}

.is-animated

This gift is in honor of someone.

Animate the checkmark entrance.

Input

Text-like inputs. Wrap around the <input> HTML element.

By default, applies to inputs of type email, number, password, search, tel, text, and url.

Implement:

Via classname: <div class="wbz-input">
Via @use: #{ds.$inputSelectors} { @include ds.input; }

Handle errors:

Via classname modifier: <div class="wbz-input is-error">
Via @use: .error { #{ds.$inputSelectors} { @include ds.input("error"); } }

.wbz-input

Standalone

First Name text

First Name

Email email

Number number

Password password

Search search

Telephone tel

URL url

HTML Example

{% if not className %}
<div class="ds-control-group wbz-input">
  <label for="ds-input-text">
    First Name
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text"
    >
      text
    </a>
  </label>
  <input type="text" id="ds-input-text" />
</div>

<div class="ds-control-group wbz-input" id="ds-input-text--disabled">
  <label for="ds-input-text--disabled">
    First Name
  </label>
  <input type="text" id="ds-input-text--disabled" disabled />
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-input-email">
    Email
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email"
    >
      email
    </a>
  </label>
  <input type="email" id="ds-input-email" />
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-input-number">
    Number
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number"
    >
      number
    </a>
  </label>
  <input type="number" id="ds-input-number" />
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-input-password">
    Password
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password"
    >
      password
    </a>
  </label>
  <input type="password" id="ds-input-password" />
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-input-search">
    Search
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search"
    >
      search
    </a>
  </label>
  <input type="search" id="ds-input-search" />
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-input-tel">
    Telephone
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel"
    >
      tel
    </a>
  </label>
  <input type="tel" id="ds-input-tel" />
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-input-url">
    URL
    <a
      class="ds-pull-right t-weight-normal"
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url"
    >
      url
    </a>
  </label>
  <input type="url" id="ds-input-url" />
</div>
{% endif %} {% if className == "is-error" %}
<div class="ds-control-group wbz-input is-error">
  <label for="ds-input-text--error">First Name</label>
  <input type="text" id="ds-input-text--error" />
  <label for="ds-input-text--error" generated="true" class="error">
    This field is required
  </label>
</div>
{% endif %}

.is-error

First Name This field is required

Handle invalid value

Label

The various text labels associated with a form control.

<label>
<div class="field-prefix">
<div class="field-suffix">
<div class="description">
<label class="error">

Implementation:

Via classnames: The selectors are scoped by default for use with .wbz-input, .wbz-select, and .wbz-textarea.
Via @use: @TODO

Standalone

Custom amount

$

/mo

Minimum payment $1.00.

Custom amount

$

/mo

Minimum payment $1.00.

This field is required

Custom amount

$

/mo

Minimum payment $1.00.

Custom amount

$

/mo

Minimum payment $1.00.

Custom amount

$

/mo

Minimum payment $1.00.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum.

$

/mo

Minimum payment $1.00.

HTML Example

<div class="ds-control-group wbz-input">
  <label for="ds-label-a">Custom amount</label>
  <div class="field-prefix" aria-hidden>$</div>
  <div class="field-suffix" aria-hidden>/mo</div>
  <input type="text" id="ds-label-a" placeholder="Or, enter amount" />
  <div class="description">Minimum payment $1.00.</div>
</div>

<div class="ds-control-group wbz-input is-error">
  <label for="ds-label-b">Custom amount</label>
  <div class="field-prefix" aria-hidden>$</div>
  <div class="field-suffix" aria-hidden>/mo</div>
  <input type="text" id="ds-label-b" placeholder="Or, enter amount" />
  <div class="description">Minimum payment $1.00.</div>
  <label for="ds-label-b" generated="true" class="error">
    This field is required
  </label>
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-label-c">Custom amount</label>
  <div class="field-prefix" aria-hidden>$</div>
  <div class="field-suffix" aria-hidden>/mo</div>
  <input type="text" id="ds-label-c" placeholder="Or, enter amount" disabled />
  <div class="description">Minimum payment $1.00.</div>
</div>

<div class="ds-control-group wbz-input t-size-xs">
  <label for="ds-label-d">Custom amount</label>
  <div class="field-prefix" aria-hidden>$</div>
  <div class="field-suffix" aria-hidden>/mo</div>
  <input type="text" id="ds-label-d" placeholder="Or, enter amount" />
  <div class="description">Minimum payment $1.00.</div>
</div>

<div class="ds-control-group wbz-input t-size-s">
  <label for="ds-label-e">Custom amount</label>
  <div class="field-prefix" aria-hidden>$</div>
  <div class="field-suffix" aria-hidden>/mo</div>
  <input type="text" id="ds-label-e" placeholder="Or, enter amount" />
  <div class="description">Minimum payment $1.00.</div>
</div>

<div class="ds-control-group wbz-input">
  <label for="ds-label-f">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi
    in efficitur euismod, lorem neque fermentum elit, pharetra elementum.
  </label>
  <div class="field-prefix" aria-hidden>$</div>
  <div class="field-suffix" aria-hidden>/mo</div>
  <input type="text" id="ds-label-f" placeholder="Or, enter amount" />
  <div class="description">Minimum payment $1.00.</div>
</div>

Radio circle

Radio circle inputs. Wrap around the <input type="radio"> HTML element.

Implement:

Via classname: <div class="wbz-radio-circle">
Via @use: input[type="radio"] { @include ds.radio-circle; }

.wbz-radio-circle

Standalone

This gift is in honor of someone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum. This gift is in honor of someone.

This gift is in honor of someone.

HTML Example

<div class="ds-control-group wbz-radio-circle">
  <input
    type="radio"
    id="ds-radio-circle-a"
    name="selected-premium-id"
    value="a"
  />
  <label class="option" for="ds-radio-circle-a">
    This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-radio-circle">
  <input
    type="radio"
    id="ds-radio-circle-b"
    name="selected-premium-id"
    value="b"
    checked
  />
  <label class="option" for="ds-radio-circle-b">
    This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-radio-circle">
  <input
    type="radio"
    id="ds-radio-circle-c"
    name="selected-premium-id"
    value="c"
  />
  <label class="option" for="ds-radio-circle-c"
    >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi
    in efficitur euismod, lorem neque fermentum elit, pharetra elementum. This
    gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-radio-circle">
  <input
    type="radio"
    id="ds-radio-circle--disabled-a"
    name="selected-premium-id--disabled"
    disabled
  />
  <label class="option" for="ds-radio-circle--disabled-a"
    >This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

<div class="ds-control-group wbz-radio-circle">
  <input
    type="radio"
    id="ds-radio-circle--disabled-b"
    name="selected-premium-id--disabled"
    checked
    disabled
  />
  <label class="option" for="ds-radio-circle--disabled-b"
    >This gift is in honor of <a href="#">someone</a>.
  </label>
</div>

Radio tab

Button-like radio inputs. Wrap around the <input type="radio"> HTML element.

Implement:

Via classname: <div class="wbz-radio-tab">
Via @use: input[type="radio"] { @include ds.radio-tab; }

Optionally use in a column layout:

Via classname modifier: <div class="wbz-radio-tab is-column">
Via @use: @TODO

.wbz-radio-tab

Standalone

Monthly Contribution

One-time Donation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum. This gift is in honor of someone.

HTML Example

{% if not className %}
<div id="edit-submitted-donation-recurs-monthly">
  <div class="ds-control-group wbz-radio-tab">
    <input
      type="radio"
      id="edit-submitted-donation-recurs-monthly-1"
      name="submitted[donation][recurs_monthly]"
      value="recurs"
      checked="checked"
    />
    <label class="option" for="edit-submitted-donation-recurs-monthly-1"
      >Monthly Contribution
    </label>
  </div>
  <div class="ds-control-group wbz-radio-tab">
    <input
      type="radio"
      id="edit-submitted-donation-recurs-monthly-2"
      name="submitted[donation][recurs_monthly]"
      value="NO_RECURR"
    />
    <label class="option" for="edit-submitted-donation-recurs-monthly-2"
      >One-time Donation
    </label>
  </div>
  <div class="ds-control-group wbz-radio-tab">
    <input
      type="radio"
      id="edit-submitted-donation-recurs-monthly-3"
      name="submitted[donation][recurs_monthly]"
      value="NO_RECURR"
    />
    <label class="option" for="edit-submitted-donation-recurs-monthly-3"
      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie,
      mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum.
      This gift is in honor of <a href="#">someone</a>.
    </label>
  </div>
</div>
{% endif %} {% if className == "is-column" %}
<div
  id="edit-submitted-donation-recurs-monthly--grid"
  style="display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1em;"
>
  <div class="ds-control-group wbz-radio-tab is-column">
    <input
      type="radio"
      id="edit-submitted-donation-recurs-monthly-grid-1"
      name="submitted[donation][recurs_monthly_grid]"
      value="recurs"
      checked="checked"
    />
    <label class="option" for="edit-submitted-donation-recurs-monthly-grid-1"
      >Monthly Contribution
    </label>
  </div>
  <div class="ds-control-group wbz-radio-tab is-column">
    <input
      type="radio"
      id="edit-submitted-donation-recurs-monthly-grid-2"
      name="submitted[donation][recurs_monthly_grid]"
      value="NO_RECURR"
    />
    <label class="option" for="edit-submitted-donation-recurs-monthly-grid-2"
      >One-time Donation
    </label>
  </div>
  <div class="ds-control-group wbz-radio-tab is-column">
    <input
      type="radio"
      id="edit-submitted-donation-recurs-monthly-grid-3"
      name="submitted[donation][recurs_monthly_grid]"
      value="NO_RECURR"
    />
    <label class="option" for="edit-submitted-donation-recurs-monthly-grid-3"
      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie,
      mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum.
      This gift is in honor of <a href="#">someone</a>.
    </label>
  </div>
</div>
{% endif %}

.is-column

Monthly Contribution

One-time Donation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, mi in efficitur euismod, lorem neque fermentum elit, pharetra elementum. This gift is in honor of someone.

Stretch box and vertically center label for use as a column

Select

Dropdown selects. Wrap around the <select> HTML element.

Implement:

Via classname: <div class="wbz-select">
Via @use: select { @include ds.select; }

Handle errors:

Via classname modifier: <div class="wbz-select is-error">
Via @use: .error { select { @include ds.select("error"); } }

.wbz-select

Standalone

State/Province

HTML Example

{% if not className %}
<div
  class="ds-control-group wbz-select"
  id="webform-component-donor-information--state"
>
  <label for="edit-submitted-donor-information-state">State/Province</label>
  <select
    id="edit-submitted-donor-information-state"
    name="submitted[donor_information][state]"
    class="form-select required key-validate"
    ><option value="" selected="selected" disabled="disabled">- Select -</option
    ><option value="AL">Alabama</option
    ><option value="AK">Alaska</option
    ><option value="AZ">Arizona</option
    ><option value="AR">Arkansas</option
    ><option value="CA">California</option
    ><option value="CO">Colorado</option
    ><option value="CT">Connecticut</option
    ><option value="DE">Delaware</option
    ><option value="DC">District of Columbia</option
    ><option value="FL">Florida</option
    ><option value="GA">Georgia</option
    ><option value="HI">Hawaii</option
    ><option value="ID">Idaho</option
    ><option value="IL">Illinois</option
    ><option value="IN">Indiana</option
    ><option value="IA">Iowa</option
    ><option value="KS">Kansas</option
    ><option value="KY">Kentucky</option
    ><option value="LA">Louisiana</option
    ><option value="ME">Maine</option
    ><option value="MD">Maryland</option
    ><option value="MA">Massachusetts</option
    ><option value="MI">Michigan</option
    ><option value="MN">Minnesota</option
    ><option value="MS">Mississippi</option
    ><option value="MO">Missouri</option
    ><option value="MT">Montana</option
    ><option value="NE">Nebraska</option
    ><option value="NV">Nevada</option
    ><option value="NH">New Hampshire</option
    ><option value="NJ">New Jersey</option
    ><option value="NM">New Mexico</option
    ><option value="NY">New York</option
    ><option value="NC">North Carolina</option
    ><option value="ND">North Dakota</option
    ><option value="OH">Ohio</option
    ><option value="OK">Oklahoma</option
    ><option value="OR">Oregon</option
    ><option value="PA">Pennsylvania</option
    ><option value="RI">Rhode Island</option
    ><option value="SC">South Carolina</option
    ><option value="SD">South Dakota</option
    ><option value="TN">Tennessee</option
    ><option value="TX">Texas</option
    ><option value="UT">Utah</option
    ><option value="VT">Vermont</option
    ><option value="VA">Virginia</option
    ><option value="WA">Washington</option
    ><option value="WV">West Virginia</option
    ><option value="WI">Wisconsin</option
    ><option value="WY">Wyoming</option
    ><option value=" ">--</option
    ><option value="AA">Armed Forces (Americas)</option
    ><option value="AE"
      >Armed Forces (Europe, Canada, Middle East, Africa)</option
    ><option value="AP">Armed Forces (Pacific)</option
    ><option value="AS">American Samoa</option
    ><option value="FM">Federated States of Micronesia</option
    ><option value="GU">Guam</option
    ><option value="MH">Marshall Islands</option
    ><option value="MP">Northern Mariana Islands</option
    ><option value="PW">Palau</option
    ><option value="PR">Puerto Rico</option
    ><option value="VI">Virgin Islands</option></select
  >
</div>

<div
  class="ds-control-group wbz-select"
  id="webform-component-donor-information--state"
>
  <label for="edit-submitted-donor-information-state--disabled"
    >State/Province</label
  >
  <select
    id="edit-submitted-donor-information-state--disabled"
    name="submitted[donor_information][state]"
    class="form-select required key-validate"
    disabled
    ><option value="" selected="selected" disabled="disabled">- Select -</option
    ><option value="AL">Alabama</option
    ><option value="AK">Alaska</option
    ><option value="AZ">Arizona</option
    ><option value="AR">Arkansas</option
    ><option value="CA">California</option
    ><option value="CO">Colorado</option
    ><option value="CT">Connecticut</option
    ><option value="DE">Delaware</option
    ><option value="DC">District of Columbia</option
    ><option value="FL">Florida</option
    ><option value="GA">Georgia</option
    ><option value="HI">Hawaii</option
    ><option value="ID">Idaho</option
    ><option value="IL">Illinois</option
    ><option value="IN">Indiana</option
    ><option value="IA">Iowa</option
    ><option value="KS">Kansas</option
    ><option value="KY">Kentucky</option
    ><option value="LA">Louisiana</option
    ><option value="ME">Maine</option
    ><option value="MD">Maryland</option
    ><option value="MA">Massachusetts</option
    ><option value="MI">Michigan</option
    ><option value="MN">Minnesota</option
    ><option value="MS">Mississippi</option
    ><option value="MO">Missouri</option
    ><option value="MT">Montana</option
    ><option value="NE">Nebraska</option
    ><option value="NV">Nevada</option
    ><option value="NH">New Hampshire</option
    ><option value="NJ">New Jersey</option
    ><option value="NM">New Mexico</option
    ><option value="NY">New York</option
    ><option value="NC">North Carolina</option
    ><option value="ND">North Dakota</option
    ><option value="OH">Ohio</option
    ><option value="OK">Oklahoma</option
    ><option value="OR">Oregon</option
    ><option value="PA">Pennsylvania</option
    ><option value="RI">Rhode Island</option
    ><option value="SC">South Carolina</option
    ><option value="SD">South Dakota</option
    ><option value="TN">Tennessee</option
    ><option value="TX">Texas</option
    ><option value="UT">Utah</option
    ><option value="VT">Vermont</option
    ><option value="VA">Virginia</option
    ><option value="WA">Washington</option
    ><option value="WV">West Virginia</option
    ><option value="WI">Wisconsin</option
    ><option value="WY">Wyoming</option
    ><option value=" ">--</option
    ><option value="AA">Armed Forces (Americas)</option
    ><option value="AE"
      >Armed Forces (Europe, Canada, Middle East, Africa)</option
    ><option value="AP">Armed Forces (Pacific)</option
    ><option value="AS">American Samoa</option
    ><option value="FM">Federated States of Micronesia</option
    ><option value="GU">Guam</option
    ><option value="MH">Marshall Islands</option
    ><option value="MP">Northern Mariana Islands</option
    ><option value="PW">Palau</option
    ><option value="PR">Puerto Rico</option
    ><option value="VI">Virgin Islands</option></select
  >
</div>

<div
  class="ds-control-group wbz-select t-size-xs"
  id="webform-component-donor-information--state"
>
  <label for="edit-submitted-donor-information-state--xs">State/Province</label>
  <select
    id="edit-submitted-donor-information-state--xs"
    name="submitted[donor_information][state]"
    class="form-select required key-validate"
    ><option value="" selected="selected" disabled="disabled">- Select -</option
    ><option value="AL">Alabama</option
    ><option value="AK">Alaska</option
    ><option value="AZ">Arizona</option
    ><option value="AR">Arkansas</option
    ><option value="CA">California</option
    ><option value="CO">Colorado</option
    ><option value="CT">Connecticut</option
    ><option value="DE">Delaware</option
    ><option value="DC">District of Columbia</option
    ><option value="FL">Florida</option
    ><option value="GA">Georgia</option
    ><option value="HI">Hawaii</option
    ><option value="ID">Idaho</option
    ><option value="IL">Illinois</option
    ><option value="IN">Indiana</option
    ><option value="IA">Iowa</option
    ><option value="KS">Kansas</option
    ><option value="KY">Kentucky</option
    ><option value="LA">Louisiana</option
    ><option value="ME">Maine</option
    ><option value="MD">Maryland</option
    ><option value="MA">Massachusetts</option
    ><option value="MI">Michigan</option
    ><option value="MN">Minnesota</option
    ><option value="MS">Mississippi</option
    ><option value="MO">Missouri</option
    ><option value="MT">Montana</option
    ><option value="NE">Nebraska</option
    ><option value="NV">Nevada</option
    ><option value="NH">New Hampshire</option
    ><option value="NJ">New Jersey</option
    ><option value="NM">New Mexico</option
    ><option value="NY">New York</option
    ><option value="NC">North Carolina</option
    ><option value="ND">North Dakota</option
    ><option value="OH">Ohio</option
    ><option value="OK">Oklahoma</option
    ><option value="OR">Oregon</option
    ><option value="PA">Pennsylvania</option
    ><option value="RI">Rhode Island</option
    ><option value="SC">South Carolina</option
    ><option value="SD">South Dakota</option
    ><option value="TN">Tennessee</option
    ><option value="TX">Texas</option
    ><option value="UT">Utah</option
    ><option value="VT">Vermont</option
    ><option value="VA">Virginia</option
    ><option value="WA">Washington</option
    ><option value="WV">West Virginia</option
    ><option value="WI">Wisconsin</option
    ><option value="WY">Wyoming</option
    ><option value=" ">--</option
    ><option value="AA">Armed Forces (Americas)</option
    ><option value="AE"
      >Armed Forces (Europe, Canada, Middle East, Africa)</option
    ><option value="AP">Armed Forces (Pacific)</option
    ><option value="AS">American Samoa</option
    ><option value="FM">Federated States of Micronesia</option
    ><option value="GU">Guam</option
    ><option value="MH">Marshall Islands</option
    ><option value="MP">Northern Mariana Islands</option
    ><option value="PW">Palau</option
    ><option value="PR">Puerto Rico</option
    ><option value="VI">Virgin Islands</option></select
  >
</div>
{% endif %} {% if className == "is-error" %}
<div
  class="ds-control-group wbz-select is-error"
  id="webform-component-donor-information--state"
>
  <label for="edit-submitted-donor-information-state--error"
    >State/Province</label
  >
  <select
    id="edit-submitted-donor-information-state--error"
    name="submitted[donor_information][state]"
    class="form-select required key-validate"
    ><option value="" selected="selected" disabled="disabled">- Select -</option
    ><option value="AL">Alabama</option
    ><option value="AK">Alaska</option
    ><option value="AZ">Arizona</option
    ><option value="AR">Arkansas</option
    ><option value="CA">California</option
    ><option value="CO">Colorado</option
    ><option value="CT">Connecticut</option
    ><option value="DE">Delaware</option
    ><option value="DC">District of Columbia</option
    ><option value="FL">Florida</option
    ><option value="GA">Georgia</option
    ><option value="HI">Hawaii</option
    ><option value="ID">Idaho</option
    ><option value="IL">Illinois</option
    ><option value="IN">Indiana</option
    ><option value="IA">Iowa</option
    ><option value="KS">Kansas</option
    ><option value="KY">Kentucky</option
    ><option value="LA">Louisiana</option
    ><option value="ME">Maine</option
    ><option value="MD">Maryland</option
    ><option value="MA">Massachusetts</option
    ><option value="MI">Michigan</option
    ><option value="MN">Minnesota</option
    ><option value="MS">Mississippi</option
    ><option value="MO">Missouri</option
    ><option value="MT">Montana</option
    ><option value="NE">Nebraska</option
    ><option value="NV">Nevada</option
    ><option value="NH">New Hampshire</option
    ><option value="NJ">New Jersey</option
    ><option value="NM">New Mexico</option
    ><option value="NY">New York</option
    ><option value="NC">North Carolina</option
    ><option value="ND">North Dakota</option
    ><option value="OH">Ohio</option
    ><option value="OK">Oklahoma</option
    ><option value="OR">Oregon</option
    ><option value="PA">Pennsylvania</option
    ><option value="RI">Rhode Island</option
    ><option value="SC">South Carolina</option
    ><option value="SD">South Dakota</option
    ><option value="TN">Tennessee</option
    ><option value="TX">Texas</option
    ><option value="UT">Utah</option
    ><option value="VT">Vermont</option
    ><option value="VA">Virginia</option
    ><option value="WA">Washington</option
    ><option value="WV">West Virginia</option
    ><option value="WI">Wisconsin</option
    ><option value="WY">Wyoming</option
    ><option value=" ">--</option
    ><option value="AA">Armed Forces (Americas)</option
    ><option value="AE"
      >Armed Forces (Europe, Canada, Middle East, Africa)</option
    ><option value="AP">Armed Forces (Pacific)</option
    ><option value="AS">American Samoa</option
    ><option value="FM">Federated States of Micronesia</option
    ><option value="GU">Guam</option
    ><option value="MH">Marshall Islands</option
    ><option value="MP">Northern Mariana Islands</option
    ><option value="PW">Palau</option
    ><option value="PR">Puerto Rico</option
    ><option value="VI">Virgin Islands</option></select
  ><label
    for="edit-submitted-donor-information-state--error"
    generated="true"
    class="error"
    >This field is required</label
  >
</div>
{% endif %}

.is-error

State/Province This field is required

Handle invalid value

Text area

Wrap around the <textarea> HTML element.

Implement:

Via classname: <div class="wbz-textarea">
Via @use: textarea { @include ds.textarea; }

Handle errors:

Via classname modifier: <div class="wbz-textarea is-error">
Via @use: .error { textarea { @include ds.textarea("error"); } }

.wbz-textarea

Standalone

Tell us what inspired you to donate today:

Responses will be kept confidential.

Tell us what inspired you to donate today:

Responses will be kept confidential.

HTML Example

{% if not className %}
<div
  class="ds-control-group wbz-textarea"
  id="webform-component-tell-us-what-inspired-you-to-donate-today"
>
  <label for="edit-submitted-tell-us-what-inspired-you-to-donate-today"
    >Tell us what inspired you to donate today:
  </label>
  <textarea
    id="edit-submitted-tell-us-what-inspired-you-to-donate-today"
    name="submitted[tell_us_what_inspired_you_to_donate_today]"
    cols="60"
    rows="5"
    class="form-textarea"
  ></textarea>
  <div class="description">Responses will be kept confidential.</div>
</div>

<div
  class="ds-control-group wbz-textarea"
  id="webform-component-tell-us-what-inspired-you-to-donate-today--disabled"
>
  <label
    for="edit-submitted-tell-us-what-inspired-you-to-donate-today--disabled"
    >Tell us what inspired you to donate today:
  </label>
  <textarea
    id="edit-submitted-tell-us-what-inspired-you-to-donate-today"
    name="submitted[tell_us_what_inspired_you_to_donate_today]"
    cols="60"
    rows="5"
    class="form-textarea"
    disabled
  ></textarea>
  <div class="description">Responses will be kept confidential.</div>
</div>
{% endif %} {% if className == "is-error" %}
<div
  class="ds-control-group wbz-textarea is-error"
  id="webform-component-tell-us-what-inspired-you-to-donate-today--error"
>
  <label for="edit-submitted-tell-us-what-inspired-you-to-donate-today--error"
    >Tell us what inspired you to donate today:
  </label>
  <textarea
    id="edit-submitted-tell-us-what-inspired-you-to-donate-today"
    name="submitted[tell_us_what_inspired_you_to_donate_today]"
    cols="60"
    rows="5"
    class="form-textarea"
  ></textarea>
  <div class="description">Responses will be kept confidential.</div>
  <label
    for="webform-component-tell-us-what-inspired-you-to-donate-today--error"
    generated="true"
    class="error"
    >This field is required</label
  >
</div>
{% endif %}

.is-error

Tell us what inspired you to donate today:

Responses will be kept confidential.

This field is required

Handle invalid value

ferris-ds 🎡

Design system for WBEZ.org

Form

Checkbox

Input

Label

Radio circle

Radio tab

Select

Text area