1import{r as e,h as l}from"./p-f7529612.js";const a=class{constructor(l){e(this,l)}render(){return l("page-template",{name:this.name},l("p",{class:"c-paragraph"},"From single input controls like text boxes to full form patterns."),l("h2",{id:"text-input",class:"c-heading u-xlarge"},"Text Input"),l("blaze-demo",{language:"language-html",code:'<input class="c-field" placeholder="Type in here..." type="text" />'}),l("blaze-demo",{language:"language-html",code:'<textarea class="c-field" placeholder="Type in here..."></textarea>'}),l("blaze-demo",{language:"language-html",code:'<select class="c-field">\n <option>Choose me...</option>\n</select>'}),l("h2",{id:"colors",class:"c-heading u-xlarge"},"Colors"),l("blaze-demo",{language:"language-html",code:'<input class="c-field c-field--success" placeholder=".c-field--success" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field c-field--error" placeholder=".c-field--error" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field" disabled placeholder="disabled" type="text">'}),l("h2",{id:"icons",class:"c-heading u-xlarge"},"Icons"),l("blaze-demo",{language:"language-html",code:'<div class="o-field o-field--icon-left">\n <i class="fa-solid fa-calendar-days c-icon"></i>\n <input class="c-field" type="text">\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="o-field o-field--icon-right">\n <input class="c-field" type="text">\n <i class="fa-solid fa-magnifying-glass c-icon"></i>\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="o-field o-field--icon-left o-field--icon-right">\n <i class="fa-solid fa-user c-icon u-color-brand"></i>\n <input class="c-field c-field--success" type="text">\n <i class="fa-solid fa-check c-icon u-color-green"></i>\n</div>'}),l("h2",{id:"size",class:"c-heading u-xlarge"},"Sizes"),l("blaze-demo",{language:"language-html",code:'<input class="c-field u-xsmall" placeholder=".u-xsmall" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field u-small" placeholder=".u-small" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field u-medium" placeholder=".u-medium" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field u-large" placeholder=".u-large" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field u-xlarge" placeholder=".u-xlarge" type="text">'}),l("blaze-demo",{language:"language-html",code:'<input class="c-field u-super" placeholder=".u-super" type="text">'}),l("h2",{id:"input-groups",class:"c-heading u-xlarge"},"Input Groups"),l("h3",{id:"input-group-inline",class:"c-heading u-large"},"Inline"),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group">\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n</div>'}),l("h3",{id:"input-group-fixed-width",class:"c-heading u-large"},"Fixed Width"),l("p",{class:"c-paragraph"},"Use ",l("code",{class:"u-code"},".o-field--fixed")," to fix the width of the field without it breaking the layout of the group."),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group">\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field o-field--fixed" style="width:50%">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n</div>'}),l("h3",{id:"input-group-stacked",class:"c-heading u-large"},"Stacked"),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group c-input-group--stacked">\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n</div>'}),l("h3",{id:"input-group-buttons",class:"c-heading u-large"},"Buttons"),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group">\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <button class="c-button c-button--brand">Action</button>\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group">\n <button class="c-button c-button--brand">Action</button>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group">\n <button class="c-button c-button--brand">Action</button>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <button class="c-button c-button--brand">Action</button>\n</div>'}),l("h3",{id:"input-group-rounded",class:"c-heading u-large"},"Rounded"),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group c-input-group--rounded">\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group c-input-group--rounded">\n <button class="c-button c-button--brand">Action</button>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <button class="c-button c-button--brand">Action</button>\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group c-input-group--rounded-left">\n <button class="c-button c-button--brand">Action</button>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <button class="c-button c-button--brand">Action</button>\n</div>'}),l("blaze-demo",{language:"language-html",code:'<div class="c-input-group c-input-group--rounded-right">\n <button class="c-button c-button--brand">Action</button>\n <div class="o-field">\n <input class="c-field" placeholder=".c-input-group">\n </div>\n <button class="c-button c-button--brand">Action</button>\n</div>'}),l("h2",{id:"checkboxes-radios",class:"c-heading u-xlarge"},"Checkboxes and Radios"),l("p",{class:"c-paragraph"},"Place your checkboxes and radios within labels and append the ",l("code",{class:"u-code"},".c-field--choice")," ","modifier class."),l("blaze-demo",{language:"language-html",code:'<label class="c-field c-field--choice">\n <input type="checkbox"> Tick the box\n</label>\n<label class="c-field c-field--choice">\n <input name="radios" type="radio" checked> Yes\n</label>\n<label class="c-field c-field--choice">\n <input name="radios" type="radio"> No\n</label>'}),l("h2",{id:"fieldsets-legends",class:"c-heading u-xlarge"},"Fieldsets and Legends"),l("p",{class:"c-paragraph"},"Use ",l("code",{class:"u-code"},".fieldset")," and ",l("code",{class:"u-code"},".fieldset__legend")," classes to apply Blaze's styles to ensure consistent fieldset behaviours."),l("blaze-demo",{language:"language-html",code:'<fieldset class="o-fieldset">\n <legend class="o-fieldset__legend">A group of controls</legend>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option one\n </label>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option two\n </label>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option three\n </label>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">
1\n Option four\n </label>\n</fieldset>'}),l("h2",{id:"disabled-fieldset",class:"c-heading u-xlarge"},"Disabled Fieldset"),l("p",{class:"c-paragraph"},"Disabling a fieldset will disable all controls within it and Blaze will apply the disabled styling."),l("blaze-demo",{language:"language-html",code:'<fieldset class="o-fieldset" disabled>\n <legend class="o-fieldset__legend">A group of controls</legend>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option one\n </label>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option two\n </label>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option three\n </label>\n <label class="c-field c-field--choice">\n <input type="radio" name="optionsRadios">\n Option four\n </label>\n</fieldset>'}),l("h2",{id:"labels-forms-elements",class:"c-heading u-xlarge"},"Labels and Form Elements"),l("blaze-demo",{language:"language-html",code:'<div class="o-form-element">\n <label class="c-label" for="nickname">Nickname:</label>\n <input id="nickname" placeholder="Nickname" class="c-field">\n</div>\n<label class="c-label o-form-element">\n Real name:\n <input class="c-field c-field--label" placeholder="Real name">\n</label>'}),l("h2",{id:"hints",class:"c-heading u-xlarge"},"Hints"),l("blaze-demo",{language:"language-html",code:'<label class="c-label">\n Username:\n <input class="c-field c-field--label">\n <div role="tooltip" class="c-hint">Make up a username or use your email address</div>\n</label>'}),l("p",{class:"c-paragraph"},l("code",{class:"u-code"},".c-hint--static")," will make the hint visible at all times."),l("h2",{id:"forms",class:"c-heading u-xlarge"},"Forms"),l("p",{class:"c-paragraph"},"Blaze has no classes for forms, rather it relies on styling the child blocks of forms; fieldsets, legends, labels and fields."),l("blaze-demo",{language:"language-html",code:'<fieldset class="o-fieldset">\n <legend class="o-fieldset__legend">And all together now!</legend>\n <div class="o-form-element">\n <label class="c-label" for="houseno">Address line 1:</label>\n <input id="houseno" placeholder="House name or number" class="c-field">\n </div>\n <label class="c-label o-form-element">\n Postcode:\n <input class="c-field c-field--label" placeholder="e.g. AB12 3CD">\n <div role="tooltip" class="c-hint">e.g. AB12 3CD</div>\n </label>\n <label class="c-label c-field c-field--choice o-form-element">\n <input type="checkbox">\n Send me spam\n </label>\n <fieldset class="o-fieldset c-list c-list--inline c-list--unstyled">\n <legend class="o-fieldset__legend">Account login:</legend>\n <label class="c-label c-field c-field--choice c-list__item">\n <input type="radio" name="account" checked>\n New user\n </label>\n <label class="c-label c-field c-field--choice c-list__item">\n <input type="radio" name="account">\n Existing user\n </label>\n <div class="o-form-element">\n <label class="c-toggle">\n Activate lockdown?\n <input type="checkbox" checked>\n <div class="c-toggle__track">\n <div class="c-toggle__handle"></div>\n </div>\n </label>\n </div>\n</fieldset>'}))}};export{a as components_inputs}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.