Input Elements
Inline Input
I am
and I live in
I am
and I live in
I am
and I live in
I am
and I live in
I am
and I live in
HTML
<div class="">
<label>Default Inline:</label>
<span>I am</span>
<label for="input_text_name" class="ss-c-label ss-c-label--hidden">
Name
</label>
<input
type="text"
id="input_text_name"
class="ss-c-input ss-c-input--base--inline"
placeholder="Name"
/>
<span>and I live in</span>
<label for="input_text_place" class="ss-c-label ss-c-label--hidden">
Place
</label>
<input
type="text"
id="input_text_place"
class="ss-c-input ss-c-input--base--inline"
placeholder="Place"
/>
</div>
<div class="">
<label>Straight Inline:</label>
<span>I am</span>
<label for="input_text_name_2" class="ss-c-label ss-c-label--hidden">
Name
</label>
<input
type="text"
id="input_text_name_2"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--straight"
placeholder="Name"
/>
<span>and I live in</span>
<label for="input_text_place_2" class="ss-c-label ss-c-label--hidden">
Place
</label>
<input
type="text"
id="input_text_place_2"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--straight"
placeholder="Place"
/>
</div>
<div class="">
<label>Rounded Inline:</label>
<span>I am</span>
<label for="input_text_name_3" class="ss-c-label ss-c-label--hidden">
Name
</label>
<input
type="text"
id="input_text_name_3"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--rounded"
placeholder="Name"
/>
<span>and I live in</span>
<label for="input_text_place_3" class="ss-c-label ss-c-label--hidden">
Place
</label>
<input
type="text"
id="input_text_place_3"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--rounded"
placeholder="Place"
/>
</div>
<div class="">
<label>Underline Inline:</label>
<span>I am</span>
<label for="input_text_name_4" class="ss-c-label ss-c-label--hidden">
Name
</label>
<input
type="text"
id="input_text_name_4"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--underline"
placeholder="Name"
/>
<span>and I live in</span>
<label for="input_text_place_4" class="ss-c-label ss-c-label--hidden">
Place
</label>
<input
type="text"
id="input_text_place_4"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--underline"
placeholder="Place"
/>
</div>
<div class="">
<label>Filled Inline:</label>
<span>I am</span>
<label for="input_text_name_5" class="ss-c-label ss-c-label--hidden">
Name
</label>
<input
type="text"
id="input_text_name_5"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--filled"
placeholder="Name"
/>
<span>and I live in</span>
<label for="input_text_place_5" class="ss-c-label ss-c-label--hidden">
Place
</label>
<input
type="text"
id="input_text_place_5"
class="ss-c-input ss-c-input--base--inline ss-c-input--style--filled"
placeholder="Place"
/>
</div>Form Input
HTML
<div class="">
<label>Default form:</label>
<label for="input_text_name_6" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_6"
class="ss-c-input ss-c-input--base--form"
placeholder="Name"
/>
</div>
<div class="">
<label>Straight form:</label>
<label for="input_text_name_7" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_7"
class="ss-c-input ss-c-input--base--form ss-c-input--style--straight"
placeholder="Name"
/>
</div>
<div class="">
<label>Rounded form:</label>
<label for="input_text_name_8" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_8"
class="ss-c-input ss-c-input--base--form ss-c-input--style--rounded"
placeholder="Name"
/>
</div>
<div class="">
<label>Underline form:</label>
<label for="input_text_name_9" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_9"
class="ss-c-input ss-c-input--base--form ss-c-input--style--underline"
placeholder="Name"
/>
</div>
<div class="">
<label>Filled form:</label>
<label for="input_text_name_10" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_10"
class="ss-c-input ss-c-input--base--form ss-c-input--style--filled"
placeholder="Name"
/>
</div>Input States
HTML
<!-- Default -->
<div class="ss-c-field-group">
<label for="default" class="ss-c-label">Default</label>
<input
id="default"
type="text"
class="ss-c-input"
placeholder="Default"
/>
</div>
<!-- Focus -->
<div class="ss-c-field-group">
<label for="focus" class="ss-c-label">Focus</label>
<input
id="focus"
type="text"
class="ss-c-input"
placeholder="Focus me"
/>
</div>
<!-- Disabled -->
<div class="ss-c-field-group">
<label for="disabled" class="ss-c-label">Disabled</label>
<input
id="disabled"
type="text"
class="ss-c-input"
disabled
placeholder="Can't type"
/>
</div>
<!-- Success -->
<div class="ss-c-field-group">
<label for="success" class="ss-c-label">Success</label>
<input
id="success"
type="text"
class="ss-c-input ss-c-is_success"
placeholder="Valid input"
/>
</div>
<!-- Warning -->
<div class="ss-c-field-group">
<label for="warning" class="ss-c-label">Warning</label>
<input
id="warning"
type="text"
class="ss-c-input ss-c-is_warning"
placeholder="Might need attention"
/>
</div>
<!-- Error -->
<div class="ss-c-field-group">
<label for="error" class="ss-c-label">Error</label>
<input
id="error"
type="text"
class="ss-c-input ss-c-is_error"
placeholder="Incorrect input"
/>
</div>
<!-- Info -->
<div class="ss-c-field-group">
<label for="info" class="ss-c-label">Info</label>
<input
id="info"
type="text"
class="ss-c-input ss-c-is_info"
placeholder="Helpful context"
/>
</div>
<!-- Focus-visible test -->
<div class="ss-c-field-group">
<label for="focus-visible" class="ss-c-label">
Focus-visible (keyboard tab)
</label>
<input
id="focus-visible"
type="text"
class="ss-c-input"
placeholder="Tab into me"
/>
</div>Form Input
HTML
<div class="">
<label>Default form:</label>
<label for="input_text_name_11" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_11"
class="ss-c-input ss-c-input--base--form"
placeholder="Name"
/>
</div>
<div class="">
<label>Straight form:</label>
<label for="input_text_name_12" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_12"
class="ss-c-input ss-c-input--base--form ss-c-input--style--straight"
placeholder="Name"
/>
</div>
<div class="">
<label>Rounded form:</label>
<label for="input_text_name_13" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_13"
class="ss-c-input ss-c-input--base--form ss-c-input--style--rounded"
placeholder="Name"
/>
</div>
<div class="">
<label>Underline form:</label>
<label for="input_text_name_14" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_14"
class="ss-c-input ss-c-input--base--form ss-c-input--style--underline"
placeholder="Name"
/>
</div>
<div class="">
<label>Filled form:</label>
<label for="input_text_name_15" class="ss-c-label">Name</label>
<input
type="text"
id="input_text_name_15"
class="ss-c-input ss-c-input--base--form ss-c-input--style--filled"
placeholder="Name"
/>
</div>Default Form Column ()
HTML
<form class="ss-c-form--col">
<label for="name">Name</label>
<input
type="text"
id="name"
class="ss-c-input"
placeholder="Your full name"
/>
<label for="email">Email</label>
<input
type="email"
id="email"
class="ss-c-input"
placeholder="you@example.com"
/>
<label for="bio">Bio</label>
<textarea
id="bio"
class="ss-c-input"
rows="4"
placeholder="Tell us something..."
></textarea>
<button type="submit" class="ss-c-button ss-c-button--solid">Submit</button>
<button type="reset" class="ss-c-button ss-c-button--solid">Reset</button>
</form>Default Form Column (Form Groups)
HTML
<form class="ss-c-form--col">
<div class="ss-c-form__field">
<label for="name_2">Name</label>
<input
type="text"
id="name_2"
class="ss-c-input"
placeholder="Your full name"
/>
</div>
<div class="ss-c-form__field">
<label for="email_2">Email</label>
<input
type="email"
id="email_2"
class="ss-c-input"
placeholder="you@example.com"
/>
</div>
<div class="ss-c-form__field">
<label for="bio_2">Bio</label>
<textarea
id="bio_2"
class="ss-c-input"
rows="4"
placeholder="Tell us something..."
></textarea>
</div>
<div class="ss-c-form__control">
<button type="submit" class="ss-c-button ss-c-button--solid">
Submit
</button>
<button type="reset" class="ss-c-button ss-c-button--solid">
Reset
</button>
</div>
</form>Default Form Row ()
HTML
<form class="ss-c-form--row">
<label for="name_3">Name</label>
<input
type="text"
id="name_3"
class="ss-c-input"
placeholder="Your full name"
/>
<label for="email_3">Email</label>
<input
type="email"
id="email_3"
class="ss-c-input"
placeholder="you@example.com"
/>
<label for="bio_3">Bio</label>
<textarea
id="bio_3"
class="ss-c-input"
rows="4"
placeholder="Tell us something..."
></textarea>
<button type="submit" class="ss-c-button ss-c-button--solid">Submit</button>
<button type="reset" class="ss-c-button ss-c-button--solid">Reset</button>
</form>Default Form Row (Form Groups)
HTML
<form class="ss-c-form--row">
<div class="ss-c-form__field">
<label for="name_4">Name</label>
<input
type="text"
id="name_4"
class="ss-c-input"
placeholder="Your full name"
/>
</div>
<div class="ss-c-form__field">
<label for="email_4">Email</label>
<input
type="email"
id="email_4"
class="ss-c-input"
placeholder="you@example.com"
/>
</div>
<div class="ss-c-form__field">
<label for="bio_4">Bio</label>
<textarea
id="bio_4"
class="ss-c-input"
rows="4"
placeholder="Tell us something..."
></textarea>
</div>
<div class="ss-c-form__control">
<button type="submit" class="ss-c-button ss-c-button--solid">
Submit
</button>
<button type="reset" class="ss-c-button ss-c-button--solid">
Reset
</button>
</div>
</form>Range Sliders
Min -50 · Max 50 · Step 5
Textarea
Multi-line text input fields for longer content.
Basic Textarea
HTML
<div style="max-width: 400px">
<label
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Description
</label>
<textarea
class="ss-c-textarea"
rows="4"
placeholder="Enter your description here..."
></textarea>
</div>Textarea with Character Count
Maximum 200 characters
0 / 200
HTML
<div style="max-width: 400px">
<label
style="display: block; margin-bottom: 8px; font-weight: 500"
>
Bio
</label>
<textarea
class="ss-c-textarea"
rows="4"
maxlength="200"
placeholder="Tell us about yourself..."
></textarea>
<div
style="
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 12px;
opacity: 0.7;
"
>
<span>Maximum 200 characters</span>
<span>0 / 200</span>
</div>
</div>Textarea Sizes
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
"
>
<!-- Small -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
Small
</label>
<textarea
class="ss-c-textarea ss-c-textarea--small"
rows="2"
placeholder="Small textarea..."
></textarea>
</div>
<!-- Medium -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 14px"
>
Medium (Default)
</label>
<textarea
class="ss-c-textarea"
rows="3"
placeholder="Medium textarea..."
></textarea>
</div>
<!-- Large -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 15px"
>
Large
</label>
<textarea
class="ss-c-textarea ss-c-textarea--large"
rows="5"
placeholder="Large textarea..."
></textarea>
</div>
</div>Textarea States
This field is required
✓ Looks good!
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px;
"
>
<!-- Focus State -->
<div>
<label style="display: block; margin-bottom: 6px">
Focused
</label>
<textarea
class="ss-c-textarea focus"
rows="3"
placeholder="Focused textarea..."
></textarea>
</div>
<!-- Disabled State -->
<div>
<label
style="display: block; margin-bottom: 6px; opacity: 0.5"
>
Disabled
</label>
<textarea
class="ss-c-textarea disabled"
rows="3"
disabled
placeholder="Disabled textarea..."
></textarea>
</div>
<!-- Error State -->
<div>
<label style="display: block; margin-bottom: 6px">Error</label>
<textarea
class="ss-c-textarea ss-c-error"
rows="3"
placeholder="Error textarea..."
></textarea>
<span
style="
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--ss-color-error);
"
>
This field is required
</span>
</div>
<!-- Success State -->
<div>
<label for="textarea-success" style="display: block; margin-bottom: 6px">
Success
</label>
<textarea
id="textarea-success"
class="ss-c-textarea ss-c-success"
rows="3"
>
Valid content here</textarea
>
<span
style="
display: block;
margin-top: 6px;
font-size: 13px;
color: var(--ss-color-success);
"
>
✓ Looks good!
</span>
</div>
</div>Resize Options
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
"
>
<!-- Vertical Resize -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
Vertical Resize
</label>
<textarea
rows="3"
placeholder="Resize vertically..."
></textarea>
</div>
<!-- Horizontal Resize -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
Horizontal Resize
</label>
<textarea
rows="3"
placeholder="Resize horizontally..."
></textarea>
</div>
<!-- No Resize -->
<div>
<label
style="display: block; margin-bottom: 6px; font-size: 13px"
>
No Resize
</label>
<textarea
rows="3"
placeholder="Cannot resize..."
></textarea>
</div>
</div>