Components

Fieldset(SCSS)

Group form elements together.

Version:2.0.8 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-scss

This component is moving out of Thumbprint

This component will soon be moved out of Thumbprint and into the website codebase. No action is required of you and you may continue using it. The Design Systems team will own the migration.

Complete form example

<fieldset class="tp-fieldset">
<ol class="tp-form-fields">
<li class="tp-form-field__item">
<label class="tp-label" for="input-4592577034584064">Input</label>
<input
type="text"
class="tp-text-input"
name="input-4592577034584064"
id="input-4592577034584064"
/>
</li>
<li class="tp-form-field__item">
<div class="tp-grid">
<div class="tp-col tp-col--6">
<label class="tp-label" for="input-3433812902019072">Split Inputs</label>
<input
type="text"
class="tp-text-input"
name="input-3433812902019072"
id="input-3433812902019072"
/>
</div>
<div class="tp-col tp-col--6">
<label class="tp-label" for="input-6453571409149952">Split Inputs</label>
<input
type="text"
class="tp-text-input"
name="input-6453571409149952"
id="input-6453571409149952"
/>
</div>
</div>
</li>
</ol>
</fieldset>
<fieldset class="tp-fieldset">
<ol class="tp-form-fields">
<li class="tp-form-field__item">
<label class="tp-label" for="input-2527917405896704">Input</label>
<input
type="text"
class="tp-text-input"
name="input-2527917405896704"
id="input-2527917405896704"
/>
</li>
<li class="tp-form-field__item">
<div class="tp-grid">
<div class="tp-col tp-col--6">
<label class="tp-label" for="input-4286127047442432">Split Inputs</label>
<input
type="text"
class="tp-text-input"
name="input-4286127047442432"
id="input-4286127047442432"
/>
</div>
<div class="tp-col tp-col--6">
<label class="tp-label" for="input-5053601976156160">Split Inputs</label>
<input
type="text"
class="tp-text-input"
name="input-5053601976156160"
id="input-5053601976156160"
/>
</div>
</div>
</li>
</ol>
</fieldset>
<div class="tp-button-row tp-button-row--right">
<button class="tp-button tp-button--tertiary">Cancel</button>
<button class="tp-button">Submit</button>
</div>