See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentselements
Forms are used for submitting data.
<form class='bx--form'>
<fieldset class='bx--form__fieldset'>
<legend class='bx--form__legend'>Account</legend>
<div class='bx--form__row'>
<div class='bx--form__row-item'>
<label for='text1' class='bx--form__label'>Username</label>
<input data-invalid id='text1' type='text' class='bx--text__input' placeholder='Enter username here'>
<div class='bx--form__requirements'>
Username is taken.
</div>
</div>
</div>
<div class='bx--form__row'>
<div class='bx--form__row-item'>
<label for='text1' class='bx--form__label'>Password</label>
<input data-invalid required pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}' id='text1' type='password' class='bx--text__input' placeholder='Enter password'>
<div class='bx--form__requirements'>
Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
</div>
</div>
<div class='bx--form__row-item'>
<label for='text1' class='bx--form__label'>Re-enter password</label>
<input data-invalid required pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}' id='text1' type='password' class='bx--text__input' placeholder='Re-enter password'>
<div class='bx--form__requirements'>
Password does not match.
</div>
</div>
</div>
</fieldset>
<fieldset class='bx--form__fieldset'>
<legend class='bx--form__legend'>Contact</legend>
<div class='bx--form__row'>
<div class='bx--form__row-item'>
<label for='text1' class='bx--form__label'>First name</label>
<input id='text1' type='text' class='bx--text__input' placeholder='First name'>
</div>
<div class='bx--form__row-item'>
<label for='text1' class='bx--form__label'>Last name</label>
<input id='text1' type='text' class='bx--text__input' placeholder='Last name'>
</div>
</div>
</fieldset>
<fieldset class='bx--form__fieldset'>
<legend class='bx--form__legend--hidden'>Marketing</legend>
<p>Keep me informed of products, services and offerings from IBM companies worldwide:</p>
<div class='bx--form__row bx--form__row--column'>
<div class='bx--form__row-item'>
<input id='form-example-telephone' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'>
<label for='form-example-telephone' class='bx--checkbox__label'>
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use>
</svg>
</span>
By telephone
</label>
</div>
<div class='bx--form__row-item'>
<input checked id='form-example-email' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'>
<label for='form-example-email' class='bx--checkbox__label'>
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#checkmark'></use>
</svg>
</span>
By email
</label>
</div>
</div>
</fieldset>
<button class='bx--btn' type='submit'>Submit</button>
</form>