Skip to content

Tweak label and related spacing #2165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
giamir merged 2 commits into from
Feb 4, 2026
Merged

Tweak label and related spacing #2165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6387d34
Tweak label and related spacing
dancormier Feb 3, 2026
a8c155c
extending Dan's approach to svelte and refine few rough edges
giamir Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions packages/stacks-classic/lib/components/description/description.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,8 @@
--_de-fc: var(--yellow-400);
}

.has-form-input({
padding-bottom: var(--su8);
});

color: var(--_de-fc);
font-size: var(--fs-body1);
margin-bottom: 0;
padding: 0 var(--su2); // Helps the label visually line up with inputs
}
8 changes: 7 additions & 1 deletion packages/stacks-classic/lib/components/form-group/form-group.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,13 @@
legend.s-label {
margin-bottom: var(--su8);
}


&:has(.s-input, .s-textarea, .s-select) {
.s-label + .s-description {
margin-top: var(--sun8);
}
}


flex-direction: var(--_fg-fd);

Expand Down
1 change: 1 addition & 0 deletions packages/stacks-classic/lib/components/input-message/input-message.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,6 @@
color: var(--_im-fc);

font-size: var(--fs-caption);
margin-bottom: 0;
padding: var(--su2);
}
35 changes: 5 additions & 30 deletions packages/stacks-classic/lib/components/label/label.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
.s-label {
--_la-c: unset;
--_la-fs: var(--fs-body2); // 16
--_la-pb: 0;

// CONTEXTUAL STYLES
&[for] {
Expand Down Expand Up @@ -30,9 +29,6 @@
// Sizes
&&__sm {
--_la-fs: var(--fs-body1); // 14
.has-form-input({
--_la-pb: var(--su4);
});
}

&&__lg {
Expand All @@ -43,7 +39,10 @@
.s-badge {
font-weight: 400;
margin-left: var(--su6);
vertical-align: middle;
}
&:has(.s-badge) {
display: flex;
align-items: center;
}

// TODO we shouldn't support descriptions and messages within labels
Expand All @@ -56,21 +55,12 @@
padding: 0;
}

.has-form-input({
--_la-pb: var(--su8);
});

&:has(+ .s-description) {
--_la-pb: var(--su4);
}

cursor: var(--_la-c);
font-size: var(--_la-fs);

color: var(--black-500);
font-family: inherit;
font-weight: 600;
padding: 0 var(--su2) var(--_la-pb); // Helps the label visually line up with inputs
padding: 0 var(--su2); // Helps the label visually line up with inputs
}

.s-required-symbol {
Expand All @@ -80,18 +70,3 @@
line-height: 0;
text-decoration: none !important;
}

// Helper mixin to apply styles to elements
// that have a form input sibling
.has-form-input(@rules) {
&:has(
~ .s-input,
~ * .s-input,
~ .s-select,
~ * .s-select,
~ .s-textarea,
~ * .s-textarea
) {
@rules();
}
}
92 changes: 47 additions & 45 deletions packages/stacks-docs/product/components/inputs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
<div class="docs-preview">
{% highlight html %}
<!-- Base -->
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="example-item1">Full name</label>
<p class="s-description mtn2 mb0">This will be shown only to employers and other Team members.</p>
<p class="s-description">This will be shown only to employers and other Team members.</p>
<input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
</div>

<!-- Disabled -->
<div class="d-flex gy4 fd-column is-disabled">
<div class="s-form-group is-disabled">
<label class="s-label" for="example-item2">Display name</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
Expand All @@ -29,7 +29,7 @@
</div>

<!-- Readonly -->
<div class="d-flex gy4 fd-column ps-relative is-readonly">
<div class="s-form-group ps-relative is-readonly">
<label class="s-label" for="example-item3">Legal name</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
Expand All @@ -39,19 +39,19 @@
{% endhighlight %}
<div class="docs-preview--example">
<div class="d-flex gy16 fd-column">
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="example-item1">Full name</label>
<p class="s-description mtn2 mb0">This will be shown only to employers and other Team members.</p>
<p class="s-description">This will be shown only to employers and other Team members.</p>
<input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
</div>
<div class="d-flex gy4 fd-column is-disabled">
<div class="s-form-group is-disabled">
<label class="s-label" for="example-item2">Display name</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
{% icon "Lock", "s-input-icon fc-black-400" %}
</div>
</div>
<div class="d-flex gy4 fd-column ps-relative is-readonly">
<div class="s-form-group ps-relative is-readonly">
<label class="s-label" for="example-item3">Legal name</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
Expand Down Expand Up @@ -107,16 +107,16 @@ <h1 class="fs-headline1 fw-normal mb16">
</h1>
<p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
</div>
<form class="d-flex fd-column gy16">
<div class="d-flex gy4 fd-column">
<form class="d-flex fd-column gy24">
<div class="s-form-group">
<label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
<input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
</div>
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
<textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
</div>
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="example-ask-members">Ask team members</label>
<input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
</div>
Expand All @@ -129,16 +129,16 @@ <h1 class="fs-headline1 fw-normal mb16">
</h1>
<p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
</div>
<form class="d-flex fd-column gy16">
<div class="d-flex gy4 fd-column">
<form class="d-flex fd-column gy24">
<div class="s-form-group">
<label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
<input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
</div>
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
<textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
</div>
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="example-ask-members">Ask team members</label>
<input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
</div>
Expand Down Expand Up @@ -188,24 +188,24 @@ <h1 class="fs-headline1 fw-normal mb16">
{% header "h4", "Warning" %}
<div class="docs-preview">
{% highlight html %}
<div class="d-flex gy4 fd-column has-warning">
<div class="s-form-group has-warning">
<label class="s-label" for="example-warning">Username</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-warning" type="text" placeholder="" aria-describedby="example-warning-desc" />
@Svg.Alert.With("s-input-icon")
</div>
<p id="example-warning-desc" class="s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
<p id="example-warning-desc" class="s-input-message">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
</div>
{% endhighlight %}
<div class="docs-preview--example">
<div>
<div class="d-flex gy4 fd-column has-warning">
<div class="s-form-group has-warning">
<label class="s-label" for="example-warning">Username</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-warning" type="text" value="AA" aria-describedby="example-warning-desc" />
{% icon "Alert", "s-input-icon" %}
</div>
<p id="example-warning-desc" class="s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
<p id="example-warning-desc" class="s-input-message">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
</div>
</div>
</div>
Expand All @@ -218,24 +218,24 @@ <h1 class="fs-headline1 fw-normal mb16">

<div class="docs-preview">
{% highlight html %}
<div class="d-flex gy4 fd-column has-error">
<div class="s-form-group has-error">
<label class="s-label" for="example-error">Username</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-error" type="text" placeholder="e.g. johndoe111" aria-describedby="example-error-desc" aria-invalid="true" />
@Svg.AlertFill.With("s-input-icon")
</div>
<p id="example-error-desc" class="s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
<p id="example-error-desc" class="s-input-message">You must provide a username. <a href="#">Forgot your username?</a></p>
</div>
{% endhighlight %}
<div class="docs-preview--example">
<div>
<div class="d-flex gy4 fd-column has-error">
<div class="s-form-group has-error">
<label class="s-label" for="example-error">Username</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-error" type="text" aria-describedby="example-error-desc" />
{% icon "AlertFill", "s-input-icon" %}
</div>
<p id="example-error-desc" class="s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
<p id="example-error-desc" class="s-input-message">You must provide a username. <a href="#">Forgot your username?</a></p>
</div>
</div>
</div>
Expand All @@ -244,24 +244,24 @@ <h1 class="fs-headline1 fw-normal mb16">
{% header "h4", "Success" %}
<div class="docs-preview">
{% highlight html %}
<div class="d-flex gy4 fd-column has-success">
<div class="s-form-group has-success">
<label class="s-label" for="example-success">Username</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-success" type="text" aria-describedby="example-success-desc" />
@Svg.Checkmark.With("s-input-icon")
</div>
<p id="example-success-desc" class="s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
<p id="example-success-desc" class="s-input-message">That name is available! <a href="#">Why do we require a username?</a></p>
</div>
{% endhighlight %}
<div class="docs-preview--example">
<div>
<div class="d-flex gy4 fd-column has-success">
<div class="s-form-group has-success">
<label class="s-label" for="example-success">Username</label>
<div class="d-flex ps-relative">
<input class="s-input" id="example-success" type="text" value="aaronshekey" aria-describedby="example-success-desc" />
{% icon "Check", "s-input-icon" %}
</div>
<p id="example-success-desc" class="s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
<p id="example-success-desc" class="s-input-message">That name is available! <a href="#">Why do we require a username?</a></p>
</div>
</div>
</div>
Expand Down Expand Up @@ -345,7 +345,7 @@ <h1 class="fs-headline1 fw-normal mb16">
{% header "h3", "Prepended inputs" %}
<div class="docs-preview">
{% highlight html %}
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="website-url">Website URL</label>
<div class="d-flex">
<div class="s-input-fill order-first">https://</div>
Expand All @@ -356,7 +356,7 @@ <h1 class="fs-headline1 fw-normal mb16">
</div>
{% endhighlight %}
<div class="docs-preview--example">
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="website-url">Website URL</label>
<div class="d-flex">
<div class="s-input-fill order-first">https://</div>
Expand All @@ -371,7 +371,7 @@ <h1 class="fs-headline1 fw-normal mb16">
{% header "h3", "Appended inputs" %}
<div class="docs-preview">
{% highlight html %}
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="min-salary">Minimum Salary</label>
<div class="d-flex">
<div class="d-flex ai-center order-last s-input-fill">
Expand All @@ -389,7 +389,7 @@ <h1 class="fs-headline1 fw-normal mb16">
</div>
{% endhighlight %}
<div class="docs-preview--example">
<div class="d-flex gy4 fd-column">
<div class="s-form-group">
<label class="s-label" for="min-salary">Minimum Salary</label>
<div class="d-flex">
<div class="d-flex ai-center order-last s-input-fill">
Expand All @@ -416,7 +416,7 @@ <h1 class="fs-headline1 fw-normal mb16">

<div class="docs-preview">
{% highlight html %}
<div class="d-flex fd-column g4">
<div class="s-form-group">
<label class="s-label" for="tag-selector">Tags</label>
<div class="s-input">
<div class="d-flex fw-wrap gx8 myn4">
Expand All @@ -432,19 +432,21 @@ <h1 class="fs-headline1 fw-normal mb16">
</div>
</div>
{% endhighlight %}
<div class="docs-preview--example d-flex fd-column g4">
<label class="s-label" for="tag-selector">Tags</label>
<div class="s-input">
<div class="d-flex fw-wrap gx8 myn4">
<span class="s-tag">
svelte
<button class="s-tag--dismiss" type="button">
<span class="v-visible-sr">Dismiss svelte tag</span>
{% icon "ClearSm" %}
</button>
</span>
<div class="docs-preview--example d-flex fd-column">
<div class="s-form-group">
<label class="s-label" for="tag-selector">Tags</label>
<div class="s-input">
<div class="d-flex fw-wrap gx8 myn4">
<span class="s-tag">
svelte
<button class="s-tag--dismiss" type="button">
<span class="v-visible-sr">Dismiss svelte tag</span>
{% icon "ClearSm" %}
</button>
</span>
</div>
<input id="tag-selector" class="s-input" type="text" role="presentation" placeholder="enter up to 5 tags">
</div>
<input id="tag-selector" class="s-input" type="text" role="presentation" placeholder="enter up to 5 tags">
</div>
</div>
</div>
Expand Down
Loading