Form
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
input
checkbox
Radios
select
textarea
Range
0
<div class="row">
<div class="col-6">
<p class="text-900 mb-1">input</p>
<div class="input-group d-flex align-items-center">
<div class="icon-input border border-end-0 rounded-2 rounded-end-0 ps-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path class="stroke-dark" d="M12 11.25C13.7949 11.25 15.25 9.79493 15.25 8C15.25 6.20507 13.7949 4.75 12 4.75C10.2051 4.75 8.75 6.20507 8.75 8C8.75 9.79493 10.2051 11.25 12 11.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path class="stroke-dark" d="M6.84723 19.25H17.1522C18.2941 19.25 19.1737 18.2681 18.6405 17.2584C17.856 15.7731 16.0677 14 11.9997 14C7.93174 14 6.1434 15.7731 5.35897 17.2584C4.8257 18.2681 5.70531 19.25 6.84723 19.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<input type="text" class="form-control ms-0 border rounded-2 rounded-start-0 border-start-0" name="name" placeholder="Your name *" aria-label="username" />
</div>
<p class="text-900 mb-2 mt-3">checkbox</p>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked />
<label class="form-check-label text-900 fw-bold" for="flexCheckChecked"> Research planning </label>
</div>
<div class="form-check mb-2 me-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label text-900 fw-bold" for="flexCheckDefault"> Finance Advisory </label>
</div>
<p class="text-900 mb-2 mt-3">Radios</p>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked />
<label class="form-check-label text-900 fw-bold" for="flexRadioDefault1"> Research planning </label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" />
<label class="form-check-label text-900 fw-bold" for="flexRadioDefault2"> Finance Advisory </label>
</div>
</div>
<div class="col-6">
<p class="text-900 mb-1">select</p>
<div class="input-group d-flex align-items-center">
<div class="icon-input border border-end-0 rounded-2 rounded-end-0 ps-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<select class="form-select border-start-0" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<p class="text-900 mb-2 mt-3">textarea</p>
<div class="input-group">
<div class="icon-input pt-2 ps-3 align-items-start border border-end-0 rounded-1 rounded-end-0">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path class="stroke-dark" d="M5.5 2.14844H3C1.89543 2.14844 1 3.04387 1 4.14844V14.6484C1 15.753 1.89543 16.6484 3 16.6484H13.5C14.6046 16.6484 15.5 15.753 15.5 14.6484V12.1484" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
class="fill-dark"
d="M17.3285 1.20344L16.4448 0.319749C16.0185 -0.106583 15.3248 -0.106583 14.8984 0.319749L7.82915 7.38907C7.76373 7.45449 7.71914 7.53782 7.70096 7.62854L7.2591 9.83772C7.22839 9.99137 7.27647 10.1502 7.38729 10.261C7.47605 10.3498 7.59561 10.3983 7.71864 10.3983C7.74923 10.3983 7.77997 10.3953 7.81053 10.3892L10.0197 9.94732C10.1104 9.92917 10.1938 9.88455 10.2592 9.81913L17.3285 2.74984C17.3285 2.74984 17.3286 2.74984 17.3286 2.74981C17.7549 2.32351 17.7549 1.6298 17.3285 1.20344ZM9.69678 9.05607L8.31606 9.33225L8.59224 7.95153L14.3461 2.19754L15.4507 3.30214L9.69678 9.05607ZM16.6658 2.0871L16.1135 2.6394L15.0089 1.53479L15.5612 0.982524C15.6221 0.921601 15.7212 0.92157 15.7821 0.982493L16.6658 1.86618C16.7267 1.92707 16.7267 2.0262 16.6658 2.0871Z"
fill="black"
/>
</svg>
</div>
<textarea class="form-control border border-start-0 ms-0 rounded-start-0 rounded-1 pb-10" name="name" placeholder="Describe Your Project in Short" aria-label="With textarea"></textarea>
</div>
</div>
<div class="col-4 mt-5">
<p class="text-900 mb-1">Range</p>
<label for="range-1" class="form-label text-500 mb-0 mt-2">Example range</label>
<input type="range" min="0" max="100" value="50" id="range-1" />
<div class="value d-none">0</div>
</div>
</div>