Experimental Form
<div class="bx--form-item">
<label for="text-input-3" class="bx--label">Text Input label</label>
<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>
<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>
<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" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="12" height="7" viewBox="0 0 12 7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.002 7 0 .685.726 0z"></path>
</svg>
</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
Bluemix Components provides HTML attribtues and CSS to enable form validations 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
Bluemix 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 Bluemix 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.