Form

Form

Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <label for="text-input-3" class="bx--label">Text Input label</label>
  <div class="bx--form__helper-text">
    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
  </div>
  <input id="text-input-3" type="text"
    class="bx--text-input"
    placeholder="Optional placeholder text">
</div>
<div class="bx--form-item">
  <label for="text-area-2" class="bx--label">Text Area label</label>
  <div class="bx--form__helper-text">
    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
  </div>
  <textarea id="text-area-2" class="bx--text-area"
    rows="4" cols="50" placeholder="Placeholder text."></textarea>
</div>
<div class="bx--form-item">
  <div
    class="bx--select">
    <label for="select-id" class="bx--label">Select label</label>
    <div class="bx--select-input__wrapper">
      <select  id="select-id"
        class="bx--select-input ">

        <option class="bx--select-option" value=""  disabled selected hidden>Choose an option </option>  
        <option class="bx--select-option" value="solong" >A much longer option that is worth having around to check how text flows </option>          <optgroup class="bx--select-optgroup" label="Category 1">
          <option class="bx--select-option" value="option1" >Option 1 </option>           <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>          <optgroup class="bx--select-optgroup" label="Category 2">
          <option class="bx--select-option" value="option1" >Option 1 </option>           <option class="bx--select-option" value="option2" >Option 2 </option>  </optgroup>   </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
    </div>
  </div>
</div>
<div class="bx--form-item">
  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
</div>

Documentation

SCSS

Modifiers

Modifiers are used with various form-related classes.

Selector Description
.bx--label--disabled Applies disabled styles for a label

FAQ

Using Form Requirement

Carbon Components provide HTML attributes and CSS to enable form validation for each input or control.

For example, here's a Form Item with a required text input.

<div class="bx--form-item">
  <label for="text1" class="bx--label">Username</label>
  <input
    required
    id="text1"
    type="text"
    class="bx--text__input"
    placeholder="Enter username here"
  />
  <div class="bx--form-requirement">Username is taken.</div>
</div>

The bx--form-requirement element will be hidden until data-invalid attribute gets added to the input. Validate the text input on your own and then use JavaScript to add the attribute if the input value is invalid.

<div class="bx--form-item">
  <label for="text1" class="bx--label">Username</label>
  <input
    data-invalid
    required
    id="text1"
    type="text"
    class="bx--text__input"
    placeholder="Enter username here"
  />
  <div class="bx--form-requirement">Username is taken.</div>
</div>

Now that data-invalid is added to the input, the bx--form-requirement will appear.

HTML

Carbon Components provides inputs (checkboxes, text-inputs, etc.) and some default styles for forms:

  • .bx--form-item
  • .bx--fieldset
  • .bx--label
  • .bx--form-requirement

Make use of HTML to compose and structure forms appropriate to your project's needs.

For example, here's a simple form for a login page that uses a mix of HTML and Carbon Components.

<form>
  <section>
    <div class="bx--form-item">
      <label for="text1" class="bx--label">Username</label>
      <input
        data-invalid
        id="your-username-id"
        type="text"
        class="bx--text__input"
        placeholder="Enter username here"
      />
      <div class="bx--form-requirement">Username is taken.</div>
    </div>
    <div class="bx--form-item">
      <label for="text1" class="bx--label">Password</label>
      <input
        data-invalid
        id="your-password-id"
        type="password"
        class="bx--text__input"
        placeholder="Enter username here"
      />
      <div class="bx--form-requirement">Password must rhyme with Batman.</div>
    </div>
  </section>
  <fieldset>
    <legend>Click Register when you're ready!</legend>
    <button class="bx--btn bx--btn--primary" type="submit">Register</button>
  </fieldset>
</form>

You can use any appropriate HTML for structuring and grouping your forms. If you want, those <section> elements could be <div> elements. Or you can change the <fieldset> element to be a <section> if that's what you want.

Fieldset and Legend

It's best practice to wrap any groups of checkboxes or radio inputs with <fieldset> and use <legend> to label the group. This best practice applies mainly to composing forms where users are submitting data.

Here's an example from MDN that explains why this is a best practice.

The <legend> element formally describes the purpose of the <fieldset> element. Many assistive technologies will use the <legend> element as if it is a part of the label of each widget inside the corresponding <fieldset> element.

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

With this example, a screen reader will pronounce "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.