@vibe-labs/design-components-inputs

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

Usage

@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";

Contents

Tokens (input.css)

Component-specific tokens defined in @layer vibe.tokens. 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|md|lg}	text-sm / text-sm / text-base	Font sizes
--input-px-{sm|md|lg}	space-2 / space-3 / space-3	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|md|lg}	0.875rem / 1rem / 1.25rem	Box dimensions
--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|md|lg}	0.875rem / 1rem / 1.25rem	Circle dimensions
--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: sm · md · lg (default: md)
• Validation states: error · success (border + focus ring color)
• Slots: input-wrap container with input-leading and input-trailing positions (auto padding via :has())
• Textarea: auto-height with vertical resize, no-resize and 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: sm · md · lg (default: md)
• checkbox-group — vertical by default, horizontal modifier available

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: sm · md · lg (default: md)
• radio-group — vertical by default, horizontal modifier available

TypeScript Types (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

npm run build