text: import{r as e,o as n,c as a,e as l,w as s,b as o,d as t,a as c}from"./app.0a68d308.js";const i='{"title":"Forms","description":"","frontmatter":{},"headers":[{"level":2,"title":"Form label","slug":"form-label"},{"level":2,"title":"Form text","slug":"form-text"},{"level":2,"title":"Inputs","slug":"inputs"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Readonly","slug":"readonly"},{"level":2,"title":"Textarea","slug":"textarea"},{"level":2,"title":"Select","slug":"select"},{"level":2,"title":"Checkbox","slug":"checkbox"},{"level":2,"title":"Radio","slug":"radio"},{"level":3,"title":"Inline","slug":"inline"},{"level":2,"title":"Floating labels","slug":"floating-labels"},{"level":3,"title":"Textareas","slug":"textareas"},{"level":3,"title":"Selects","slug":"selects"},{"level":3,"title":"Configuration","slug":"configuration"}],"relativePath":"css-framework/components/forms.md","lastUpdated":1629709763203}',p={},r=o("h1",null,"Forms",-1),d=o("p",null,[o("a",{href:"https://github.com/sgroupdesign/sui/blob/main/packages/tailwind-plugins/src/forms",target:"_blank",rel:"noopener noreferrer"},[o("code",null,"@sgroup/tailwind-plugins/forms")])],-1),u=o("p",null,[t("We use "),o("a",{href:"https://github.com/tailwindlabs/tailwindcss-forms",target:"_blank",rel:"noopener noreferrer"},"tailwindcss-forms"),t(" as a reset for form styling. This give you a good head-start for styling forms forms from a non-opinionated base.")],-1),m=o("pre",null,[o("code",null,'<div class="grid grid-cols-1 gap-6">\n    <label class="block">\n        <span class="text-gray-700">Full name</span>\n        <input type="text" class="mt-1 block w-full" placeholder="">\n    </label>\n    \n    <label class="block">\n        <span class="text-gray-700">Email address</span>\n        <input type="email" class="mt-1 block w-full" placeholder="john@example.com">\n    </label>\n    \n    <label class="block">\n        <span class="text-gray-700">When is your event?</span>\n        <input type="date" class="mt-1 block w-full">\n    </label>\n\n    <label class="block">\n        <span class="text-gray-700">What type of event is it?</span>\n        \n        <select class="block w-full mt-1">\n            <option>Corporate event</option>\n            <option>Wedding</option>\n            <option>Birthday</option>\n            <option>Other</option>\n        </select>\n    </label>\n\n    <label class="block">\n        <span class="text-gray-700">Additional details</span>\n        <textarea class="mt-1 block w-full" rows="3"></textarea>\n    </label>\n\n    <div class="block">\n        <div class="mt-2">\n            <div>\n                <label class="inline-flex items-center">\n                    <input type="checkbox" checked="">\n                    <span class="ml-2">Email me news and special offers</span>\n                </label>\n            </div>\n        </div>\n    </div>\n</div>\n')],-1),f=o("p",null,[t("When you want custom styling for your forms, you can use a collection of "),o("code",null,".form-*"),t(" classes.")],-1),h=o("h2",{id:"form-label"},[o("a",{class:"header-anchor",href:"#form-label","aria-hidden":"true"},"#"),t(" Form label")],-1),b=o("p",null,[t("Across the board, use the "),o("code",null,".form-label"),t(" class for styling the label of a form control.")],-1),k=o("pre",null,[o("code",null,'<div class="mb-3">\n    <label class="form-label" for="input-example-1">Text</label>\n    <input class="form-control" id="input-example-1" placeholder="Text" type="text">\n</div>\n')],-1),g=o("h2",{id:"form-text"},[o("a",{class:"header-anchor",href:"#form-text","aria-hidden":"true"},"#"),t(" Form text")],-1),x=o("p",null,[t("Form text should be explicitly associated with the form control it relates to using the "),o("code",null,"aria-describedby"),t(" attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.")],-1),v=o("pre",null,[o("code",null,'<label for="inputPassword5" class="form-label">Password</label>\n<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">\n<div id="passwordHelpBlock" class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div>\n')],-1),y=o("h2",{id:"inputs"},[o("a",{class:"header-anchor",href:"#inputs","aria-hidden":"true"},"#"),t(" Inputs")],-1),w=o("p",null,[t("Use the "),o("code",null,".form-control"),t(" class on any input.")],-1),_=o("pre",null,[o("code",null,'<div class="mb-3">\n    <label class="form-label" for="input-example-1">Text</label>\n    <input class="form-control" id="input-example-1" placeholder="Text" type="text">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-8">Email</label>\n    <input class="form-control" id="input-example-8" placeholder="Email" type="email">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-9">URL</label>\n    <input class="form-control" id="input-example-9" placeholder="URL" type="url">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-10">Search</label>\n    <input class="form-control" id="input-example-10" placeholder="Search" type="search">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-11">Tel</label>\n    <input class="form-control" id="input-example-11" placeholder="Tel" type="tel">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-12">Password</label>\n    <input class="form-control" id="input-example-12" placeholder="Password" type="password">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-13">Number</label>\n    <input class="form-control" id="input-example-13" placeholder="00" type="number">\n</div>\n\n<div class="mb-3">\n    <label class="form-label" for="input-example-14">Date</label>\n    <input class="form-control" id="input-example-14" type="date">\n</div>\n')],-1),T=o("pre",null,[o("code",null,'<div class="mb-3">\n    <label for="formFile" class="form-label">Default file input example</label>\n    <input class="form-control" type="file" id="formFile">\n</div>\n')],-1),C=o("pre",null,[o("code",null,'<div class="mb-3">\n    <label for="exampleColorInput" class="form-label">Color picker</label>\n    <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">\n</div>\n')],-1),S=o("h3",{id:"disabled"},[o("a",{class:"header-anchor",href:"#disabled","aria-hidden":"true"},"#"),t(" Disabled")],-1),F=o("p",null,[t("Add the "),o("code",null,"disabled"),t(" attribute on an input to give it a grayed out appearance and remove pointer events.")],-1),R=o("pre",null,[o("code",null,'<div class="mb-3">\n    <input class="form-control" type="text" placeholder="Disabled input" disabled>\n</div>\n')],-1),D=o("h3",{id:"readonly"},[o("a",{class:"header-anchor",href:"#readonly","aria-hidden":"true"},"#"),t(" Readonly")],-1),I=o("p",null,[t("Add the "),o("code",null,"readonly"),t(" attribute on an input to prevent modification of the input’s value.")],-1),A=o("pre",null,[o("code",null,'<div class="mb-3">\n    <input class="form-control" type="text" value="Readonly input" readonly>\n</div>\n')],-1),P=o("h2",{id:"textarea"},[o("a",{class:"header-anchor",href:"#textarea","aria-hidden":"true"},"#"),t(" Textarea")],-1),E=o("pre",null,[o("code",null,'<div class="mb-3">\n    <label class="form-label" for="input-example-3">Message</label> \n    <textarea class="form-control" id="input-example-3" placeholder="Textarea" rows="3"></textarea>\n</div>\n')],-1),W=o("h2",{id:"select"},[o("a",{class:"header-anchor",href:"#select","aria-hidden":"true"},"#"),t(" Select")],-1),L=o("p",null,[t("Custom "),o("code",null,"<select>"),t(" menus need only a custom class, "),o("code",null,".form-select"),t(" to trigger the custom styles. Custom styles are limited to the "),o("code",null,"<select>"),t("’s initial appearance and cannot modify the "),o("code",null,"<option>"),t("s due to browser limitations.")],-1),O=o("pre",null,[o("code",null,'<div class="mb-3">\n    <select class="form-select">\n        <option>Choose an option</option>\n        <option>Slack</option>\n        <option>Skype</option>\n        <option>Hipchat</option>\n    </select>\n</div>\n\n<div class="mb-3">\n    <select class="form-select" multiple>\n        <option>Choose an option</option>\n        <option>Slack</option>\n        <option>Skype</option>\n        <option>Hipchat</option>\n    </select>\n</div>\n')],-1),V=o("h2",{id:"checkbox"},[o("a",{class:"header-anchor",href:"#checkbox","aria-hidden":"true"},"#"),t(" Checkbox")],-1),j=o("p",null,[t("Use the "),o("code",null,".form-check-input"),t(" and "),o("code",null,".form-check-label"),t(" for both radio and checkbox inputs.")],-1),U=o("pre",null,[o("code",null,'<div class="form-check">\n    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">\n    <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>\n</div>\n\n<div class="form-check">\n    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>\n    <label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>\n</div>\n')],-1),B=o("h2",{id:"radio"},[o("a",{class:"header-anchor",href:"#radio","aria-hidden":"true"},"#"),t(" Radio")],-1),N=o("pre",null,[o("code",null,'<div class="form-check">\n    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">\n    <label class="form-check-label" for="flexRadioDefault1">Default radio</label>\n</div>\n\n<div class="form-check">\n    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>\n    <label class="form-check-label" for="flexRadioDefault2">Default checked radio</label>\n</div>\n')],-1),z=o("h3",{id:"inline"},[o("a",{class:"header-anchor",href:"#inline","aria-hidden":"true"},"#"),t(" Inline")],-1),H=o("p",null,[t("Group checkboxes or radios on the same horizontal row by adding "),o("code",null,".form-check-inline"),t(" to any "),o("code",null,".form-check"),t(".")],-1),q=o("pre",null,[o("code",null,'<div class="mb-3">\n    <div class="form-check form-check-inline">\n        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">\n        <label class="form-check-label" for="inlineCheckbox1">1</label>\n    </div>\n\n    <div class="form-check form-check-inline">\n        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">\n        <label class="form-check-label" for="inlineCheckbox2">2</label>\n    </div>\n</div>\n\n<div class="mb-3">\n    <div class="form-check form-check-inline">\n        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">\n        <label class="form-check-label" for="inlineRadio1">1</label>\n    </div>\n    <div class="form-check form-check-inline">\n        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">\n        <label class="form-check-label" for="inlineRadio2">2</label>\n    </div>\n</div>\n')],-1),Y=c('',2),M=o("pre",null,[o("code",null,'<div class="form-floating mb-3">\n    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">\n    <label for="floatingInput">Email address</label>\n</div>\n\n<div class="form-floating">\n    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">\n    <label for="floatingPassword">Password</label>\n</div>\n')],-1),G=o("p",null,[t("When there’s a value already defined, "),o("code",null,"<label>"),t("s will automatically adjust to their floated position.")],-1),J=o("pre",null,[o("code",null,'<form class="form-floating">\n    <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">\n    <label for="floatingInputValue">Input with value</label>\n</form>\n')],-1),K=o("h3",{id:"textareas"},[o("a",{class:"header-anchor",href:"#textareas","aria-hidden":"true"},"#"),t(" Textareas")],-1),Q=o("p",null,[t("By default, "),o("code",null,"<textarea>"),t("s with "),o("code",null,".form-control"),t(" will be the same height as "),o("code",null,"<input>"),t("s.")],-1),X=o("pre",null,[o("code",null,'<div class="form-floating">\n    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>\n    <label for="floatingTextarea">Comments</label>\n</div>\n')],-1),Z=o("p",null,[t("To set a custom height on your "),o("code",null,"<textarea>"),t(", do not use the "),o("code",null,"rows"),t(" attribute. Instead, set an explicit "),o("code",null,"height"),t(" (either inline or via custom CSS).")],-1),$=o("pre",null,[o("code",null,'<div class="form-floating">\n    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>\n    <label for="floatingTextarea2">Comments</label>\n</div>\n')],-1),ee=c('',2),ne=o("pre",null,[o("code",null,'<div class="form-floating">\n    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">\n        <option selected>Open this select menu</option>\n        <option value="1">One</option>\n        <option value="2">Two</option>\n        <option value="3">Three</option>\n    </select>\n\n    <label for="floatingSelect">Works with selects</label>\n</div>\n')],-1),ae=c('',3);p.render=function(o,t,c,i,p,le){const se=e("code-preview");return n(),a("div",null,[r,d,u,l(se,{"body-id":"forms-example",heading:"Unstyled forms"},{default:s((()=>[m])),_:1}),f,h,b,l(se,{"body-id":"forms-example",heading:"Form label"},{default:s((()=>[k])),_:1}),g,x,l(se,{"body-id":"forms-example",heading:"Form text"},{default:s((()=>[v])),_:1}),y,w,l(se,{"body-id":"forms-example",heading:"Form inputs"},{default:s((()=>[_])),_:1}),l(se,{"body-id":"forms-example",heading:"File input"},{default:s((()=>[T])),_:1}),l(se,{"body-id":"forms-example",heading:"Color input"},{default:s((()=>[C])),_:1}),S,F,l(se,{"body-id":"forms-example",heading:"Disabled"},{default:s((()=>[R])),_:1}),D,I,l(se,{"body-id":"forms-example",heading:"Readonly"},{default:s((()=>[A])),_:1}),P,l(se,{"body-id":"forms-example",heading:"Form textarea"},{default:s((()=>[E])),_:1}),W,L,l(se,{"body-id":"forms-example",heading:"Form selects"},{default:s((()=>[O])),_:1}),V,j,l(se,{"body-id":"forms-example",heading:"Form checkbox"},{default:s((()=>[U])),_:1}),B,l(se,{"body-id":"forms-example",heading:"Form radio"},{default:s((()=>[N])),_:1}),z,H,l(se,{"body-id":"forms-example",heading:"Inline checkbox and radio"},{default:s((()=>[q])),_:1}),Y,l(se,{"body-id":"forms-example",heading:"Floating label"},{default:s((()=>[M])),_:1}),G,l(se,{"body-id":"forms-example",heading:"Floating label with an existing value"},{default:s((()=>[J])),_:1}),K,Q,l(se,{"body-id":"forms-example",heading:"Floating label textarea"},{default:s((()=>[X])),_:1}),Z,l(se,{"body-id":"forms-example",heading:"Floating label textarea height"},{default:s((()=>[$])),_:1}),ee,l(se,{"body-id":"forms-example",heading:"Floating label select"},{default:s((()=>[ne])),_:1}),ae])};export{i as __pageData,p as default};
  