@vibe-labs/design-components-inputs

Text input, textarea, checkbox, and radio component tokens, styles, and TypeScript types for the Vibe Design System.

Installation

bash

npm install @vibe-labs/design-components-inputs

css

@import "@vibe-labs/design-components-inputs";

import { InputSizes, CheckboxSizes, RadioSizes } from "@vibe-labs/design-components-inputs/types";
import type { InputStyleProps, CheckboxStyleProps, RadioStyleProps } from "@vibe-labs/design-components-inputs/types";

Tokens

Component-specific tokens defined in @layer vibe.tokens (file: input.css). Core sizing tokens (--input-height-*, --input-border, --input-disabled-opacity) are owned by @vibe-labs/design-forms. Field wrapper tokens (--field-*) are owned by @vibe-labs/design-components-core.

Text Input / Textarea

Token	Default	Description
`--input-bg`	`--surface-base`	Background
`--input-color`	`--text-primary`	Text color
`--input-radius`	`--radius-md`	Border radius
`--input-font-size-sm`	`--text-sm`	Small font size
`--input-font-size-md`	`--text-sm`	Medium font size
`--input-font-size-lg`	`--text-base`	Large font size
`--input-px-sm`	`--space-2`	Small horizontal padding
`--input-px-md`	`--space-3`	Medium horizontal padding
`--input-px-lg`	`--space-3`	Large horizontal padding
`--input-placeholder-color`	`--text-muted`	Placeholder color
`--input-focus-border`	`--color-accent`	Focus border color
`--input-error-border`	`--color-danger`	Error state border
`--input-error-color`	`--color-danger`	Error state color
`--input-success-border`	`--color-success`	Success state border
`--input-success-color`	`--color-success`	Success state color
`--textarea-min-height`	`5rem`	Minimum textarea height

Checkbox

Token	Default	Description
`--checkbox-size-sm`	`0.875rem`	Small box size
`--checkbox-size-md`	`1rem`	Medium box size
`--checkbox-size-lg`	`1.25rem`	Large box size
`--checkbox-radius`	`--radius-xs`	Corner radius
`--checkbox-bg`	`--surface-base`	Unchecked background
`--checkbox-border-color`	`--border-strong`	Unchecked border
`--checkbox-checked-bg`	`--color-accent`	Checked background
`--checkbox-checked-border`	`--color-accent`	Checked border
`--checkbox-check-color`	`--color-accent-contrast`	Checkmark color

Radio

Token	Default	Description
`--radio-size-sm`	`0.875rem`	Small circle size
`--radio-size-md`	`1rem`	Medium circle size
`--radio-size-lg`	`1.25rem`	Large circle size
`--radio-bg`	`--surface-base`	Unchecked background
`--radio-border-color`	`--border-strong`	Unchecked border
`--radio-checked-bg`	`--color-accent`	Checked background
`--radio-checked-border`	`--color-accent`	Checked border
`--radio-dot-color`	`--color-accent-contrast`	Inner dot color
`--radio-dot-scale`	`0.4`	Inner dot size relative to circle

Generated Styles

Text Input (`input.g.css`)

.input — full-width block input with hover/focus/disabled/readonly states
Sizes: data-size="sm|md|lg" (default: md)
Validation: data-state="error|success" — changes border and focus ring color
Slots: .input-wrap container with .input-leading and .input-trailing positions; padding auto-adjusts via :has()
Textarea: .textarea with data-no-resize and data-auto-grow modifiers

Checkbox (`checkbox.g.css`)

.checkbox — inline-flex label with hidden native input, styled box, animated checkmark
States: checked (scale-in animation), indeterminate, hover, focus-visible, disabled, error
Sizes: data-size="sm|md|lg" (default: md)
.checkbox-group — vertical by default; data-horizontal modifier for row layout

Radio (`radio.g.css`)

.radio — inline-flex label with hidden native input, styled circle, ::after dot
States: checked (dot scale-in), hover, focus-visible, disabled, error
Sizes: data-size="sm|md|lg" (default: md)
.radio-group — vertical by default; data-horizontal modifier for row layout

TypeScript Types

InputSizes;    // ["sm", "md", "lg"]
InputStates;   // ["error", "success"]
CheckboxSizes; // ["sm", "md", "lg"]
RadioSizes;    // ["sm", "md", "lg"]

interface InputStyleProps {
  size?: InputSize;
  state?: InputState;
  disabled?: boolean;
}
interface InputWrapStyleProps {}
interface InputLeadingStyleProps {}
interface InputTrailingStyleProps {}
interface TextareaStyleProps {
  noResize?: boolean;
  autoGrow?: boolean;
}
interface CheckboxStyleProps {
  size?: CheckboxSize;
  state?: InputState;
  disabled?: boolean;
}
interface CheckboxGroupStyleProps {
  horizontal?: boolean;
}
interface RadioStyleProps {
  size?: RadioSize;
  state?: InputState;
  disabled?: boolean;
}
interface RadioGroupStyleProps {
  horizontal?: boolean;
}

Dist Structure

File	Description
`index.css`	Barrel — imports all files below
`input.css`	Token definitions
`input.g.css`	Generated text input + textarea styles
`checkbox.g.css`	Generated checkbox styles
`radio.g.css`	Generated radio styles
`index.js` / `index.d.ts`	TypeScript types + runtime constants

Dependencies

Requires @vibe-labs/design-forms (sizing), @vibe-labs/design-components-core (field wrapper), and @vibe-labs/design (colors, surfaces, spacing, typography, transitions, elevation).

Build

bash

npm run build

Usage Guide

Import

css

@import "@vibe-labs/design-components-inputs";

import type { InputStyleProps, CheckboxStyleProps, RadioStyleProps } from "@vibe-labs/design-components-inputs/types";

Variants

Input size

Set data-size on .input, .checkbox, .radio: sm · md (default) · lg

Validation state

Set data-state on .input, .checkbox, .radio: error · success

Textarea modifiers

data-no-resize on .textarea — disables resize handle
data-auto-grow on .textarea — auto-height grows with content

Checkbox / radio group orientation

data-horizontal on .checkbox-group or .radio-group — switches to row layout

Examples

Text input

html

<!-- Standard text input inside a field wrapper -->
<div class="field">
  <label class="field-label" for="name">Full name</label>
  <input id="name" type="text" class="input" placeholder="Jane Doe" />
</div>

Input with leading/trailing slots

html

<!-- Input with icon prefix and clear button suffix -->
<div class="field">
  <label class="field-label" for="search">Search</label>
  <div class="input-wrap">
    <span class="input-leading">
      <svg><!-- search icon --></svg>
    </span>
    <input id="search" type="search" class="input" placeholder="Search…" />
    <span class="input-trailing">
      <button class="close-btn" data-size="sm" aria-label="Clear">
        <svg><!-- × --></svg>
      </button>
    </span>
  </div>
</div>

Input validation states

html

<!-- Error state -->
<div class="field">
  <label class="field-label">Email</label>
  <input type="email" class="input" data-state="error" value="not-an-email" />
  <span class="field-error">Please enter a valid email address.</span>
</div>

<!-- Success state -->
<div class="field">
  <label class="field-label">Username</label>
  <input type="text" class="input" data-state="success" value="vibe_dev" />
  <span class="field-success">Username is available.</span>
</div>

Textarea

html

<div class="field">
  <label class="field-label">Description</label>
  <textarea class="textarea" data-no-resize placeholder="Enter a description…"></textarea>
</div>

Checkbox group

html

<!-- Vertical checkbox group (default) -->
<div class="field">
  <span class="field-label">Notifications</span>
  <div class="checkbox-group">
    <label class="checkbox">
      <input type="checkbox" checked />
      Email
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      SMS
    </label>
    <label class="checkbox">
      <input type="checkbox" />
      Push
    </label>
  </div>
</div>

<!-- Horizontal checkbox group -->
<div class="checkbox-group" data-horizontal>
  <label class="checkbox">
    <input type="checkbox" />
    Option A
  </label>
  <label class="checkbox">
    <input type="checkbox" checked />
    Option B
  </label>
</div>

Radio group

html

<!-- Vertical radio group (default) -->
<div class="field">
  <span class="field-label">Plan</span>
  <div class="radio-group">
    <label class="radio">
      <input type="radio" name="plan" value="free" checked />
      Free
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="pro" />
      Pro
    </label>
    <label class="radio">
      <input type="radio" name="plan" value="enterprise" />
      Enterprise
    </label>
  </div>
</div>

With Vue

Use @vibe-labs/design-vue-inputs for <SbInput>, <SbTextarea>, <SbCheckbox>, <SbCheckboxGroup>, <SbRadio>, and <SbRadioGroup> which handle v-model binding and map InputStyleProps to data attributes.

Design Tokens

CSS Components

Vue Components

Themes

@vibe-labs/design-components-inputs

Installation

Contents

Tokens

Text Input / Textarea

Checkbox

Radio

Generated Styles

Text Input (`input.g.css`)

Checkbox (`checkbox.g.css`)

Radio (`radio.g.css`)

TypeScript Types

Dist Structure

Dependencies

Build

Usage Guide

Import

Variants

Input size

Validation state

Textarea modifiers

Checkbox / radio group orientation

Examples

Text input

Input with leading/trailing slots

Input validation states

Textarea

Checkbox group

Radio group

With Vue

@vibe-labs/design-components-inputs ​

Installation ​

Contents ​

Tokens ​

Text Input / Textarea ​

Checkbox ​

Radio ​

Generated Styles ​

Text Input (input.g.css) ​

Checkbox (checkbox.g.css) ​

Radio (radio.g.css) ​

TypeScript Types ​

Dist Structure ​

Dependencies ​

Build ​

Usage Guide ​

Import ​

Variants ​

Input size ​

Validation state ​

Textarea modifiers ​

Checkbox / radio group orientation ​

Examples ​

Text input ​

Input with leading/trailing slots ​

Input validation states ​

Textarea ​

Checkbox group ​

Radio group ​

With Vue ​

@vibe-labs/design-components-inputs

Installation

Contents

Tokens

Text Input / Textarea

Checkbox

Radio

Generated Styles

Text Input (`input.g.css`)

Checkbox (`checkbox.g.css`)

Radio (`radio.g.css`)

TypeScript Types

Dist Structure

Dependencies

Build

Usage Guide

Import

Variants

Input size

Validation state

Textarea modifiers

Checkbox / radio group orientation

Examples

Text input

Input with leading/trailing slots

Input validation states

Textarea

Checkbox group

Radio group

With Vue