You can make use of the various Form Element components to compose your forms. Alongside the Form Element components you can make use of the width utility CSS classes that come from Tailwind to make your form responsive.
By default all form component groups have a width of 100%. If you want to have multiple form components in a row simply apply a width utility class to the form element group div to control the width.
To make your form responsive and change layout at different screen sizes apply the responsive modifier to the width utility classes. You can find out more information on how the responsive width classes work on Tailwind's documentation.
Usage Notes:
- Use the class
.dk-formto setup the flex-box based grid for your form elements. - If you want to group different form components together wrap them in
.dk-form__groupthat will setup a sub flexbox grid. This will allow you to setup multi-column forms that collapse to the right order as well as making sure form inputs like address don't get split apart. - Make sure every input has a label even if it is empty. If you have a label that you don't want to see visually just add the
.sr-onlyutility class. That will hide the label visually but still leave it available for screen readers. - Make sure every input is connected to it's label via the ID and FOR attributes.
<div class="w-full p-2 dk-card">
<form class="dk-form">
<div class="dk-form__group lg:w-1/2 ">
<div class="dk-input-group">
<label
for="CCNumber"
class="dk-input-label">
Credit Card Number
</label>
<input
type="text"
id="CCNumber"
class="dk-input"
/>
</div>
<div class="w-1/2 dk-input-group sm:w-1/3">
<label
for="CVV"
class="dk-input-label">
CVV
</label>
<input
type="text"
id="CVV"
class="dk-input"
/>
</div>
<div class="w-1/2 dk-input-group sm:w-2/3">
<label
for="expDate"
class="dk-input-label">
Expiration Date
</label>
<input
type="text"
id="expDate"
class="dk-input"
/>
</div>
<div class="dk-input-group--dual-zip md:w-1/2 lg:w-2/3">
<label
for="expDate"
class="dk-input-label">
Two Part Zip Code
</label>
<input
type="text"
id="expDate"
class="dk-input"
/>
<span class="dual-zip__dash">
-
</span>
<input
type="text"
id="expDate"
class="dk-input "
/>
</div>
</div>
<div class="dk-form__group lg:w-1/2 ">
<div class="dk-input-group">
<label
for="labelInput"
class="dk-input-label">
Email
</label>
<input
type="text"
id="labelInput"
class="dk-input"
/>
</div>
<div class="dk-form__group">
<div class="dk-input-group">
<label
for="Address"
class="dk-input-label">
Address
</label>
<input
type="text"
id="Address"
class="dk-input"
placeholder="Address 1"
/>
<label
for="address2"
class="sr-only">
Address 2
</label>
<input
type="text"
id="address2"
placeholder="Address 2"
class="dk-input"
/>
</div>
<div class="dk-dropdown-group">
<select
class="dk-dropdown "
name=""
id="countryDrop">
<option value="MN">
United States
</option>
<option value="IA">
Canada
</option>
<option value="TX">
Mexico
</option>
</select>
</div>
<div class="dk-dropdown-group sm:w-1/3">
<select
class="dk-dropdown "
name=""
id="stateDrop">
<option value="MN">
MN
</option>
<option value="IA">
IA
</option>
<option value="TX">
TX
</option>
</select>
</div>
<div class="w-full dk-input-group sm:w-2/3">
<label
for="labelInput"
class="sr-only">
Zip Code
</label>
<input
type="text"
id="labelInput"
placeholder="Zip Code"
class="dk-input"
/>
</div>
</div>
</div>
<button class="dk-btn__primary">
Submit
</button>
</form>
</div>Javascript
dk => dk.dropdowns()