Input With Validation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
import { useId, useState } from "react";

export type InputSize = "sm" | "md" | "lg";
export type InputTone = "default" | "error" | "success";

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

const INPUT_SIZES: Record<InputSize, string> = {
  sm: "h-8 px-2.5 text-[13px]",
  md: "h-9 px-3 text-sm",
  lg: "h-11 px-3.5 text-sm",
};

const ICON_SIZES: Record<InputSize, string> = {
  sm: "[&_svg]:size-[14px]",
  md: "[&_svg]:size-4",
  lg: "[&_svg]:size-[18px]",
};

function inputClasses(size: InputSize, tone: InputTone, hasLeading = false, hasTrailing = false): string {
  return cx(
    "w-full rounded-[var(--ds-radius-sm)] border bg-[var(--ds-color-input)] text-[var(--ds-color-foreground)] shadow-none transition-colors duration-150 ease-out placeholder:text-[var(--ds-color-muted-foreground)] hover:bg-[var(--ds-color-input-hover,var(--ds-color-input))] focus:bg-[var(--ds-color-input-focus,var(--ds-color-input))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:bg-[var(--ds-color-muted)] disabled:text-[var(--ds-color-muted-foreground)] disabled:opacity-60 read-only:bg-[var(--ds-color-surface-subtle)] read-only:text-[var(--ds-color-muted-foreground)] motion-reduce:transition-none",
    tone === "error" ? "border-[var(--ds-color-destructive)]" : tone === "success" ? "border-[var(--ds-color-success)]" : "border-[var(--ds-color-border)] focus:border-[var(--ds-color-border-strong)]",
    INPUT_SIZES[size],
    hasLeading && "pl-9",
    hasTrailing && "pr-9",
  );
}

function Spinner() {
  return (
    <svg className="size-4 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" className="opacity-25" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

export interface InputWithValidationProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
  label?: string;
  helperText?: string;
  error?: string;
  success?: string;
  size?: InputSize;
  tone?: InputTone;
  leadingIcon?: ReactNode;
  trailingIcon?: ReactNode;
  prefix?: ReactNode;
  suffix?: ReactNode;
  validate?: (value: string) => string | undefined;
}

export function InputWithValidation({ label = "Billing email", helperText = "Use the address that receives invoices.", validate = (value) => value.includes("@") ? undefined : "Enter a valid email address.", size = "md", id, className, value, defaultValue = "", onChange, ...props }: InputWithValidationProps) {
  const generatedId = useId(); const inputId = id ?? `input-${generatedId}`; const messageId = `${inputId}-message`;
  const [internalValue, setInternalValue] = useState(String(defaultValue ?? "")); const currentValue = value === undefined ? internalValue : String(value);
  const error = currentValue ? validate(currentValue) : undefined;
  function handleChange(event: ChangeEvent<HTMLInputElement>) { if (value === undefined) setInternalValue(event.target.value); onChange?.(event); }
  return <div className="w-full"><label htmlFor={inputId} className="mb-2 block text-[13px] font-medium leading-5 text-[var(--ds-color-foreground)]">{label}</label><input id={inputId} type="email" className={cx(inputClasses(size, error ? "error" : currentValue ? "success" : "default"), className)} value={currentValue} onChange={handleChange} aria-invalid={error ? true : undefined} aria-describedby={messageId} {...props} /><p id={messageId} className={cx("mt-2 text-xs", error ? "text-[var(--ds-color-destructive)]" : currentValue ? "text-[var(--ds-color-success)]" : "text-[var(--ds-color-muted-foreground)]")}>{error ? `Error: ${error}` : currentValue ? "Success: Email format looks correct." : helperText}</p></div>;
}

export default InputWithValidation;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/* DevSnips React — JavaScript parity build. Same API and behavior as code.tsx; TypeScript types removed. */
import { useId, useState } from "react";

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}

const INPUT_SIZES = {
  sm: "h-8 px-2.5 text-[13px]",
  md: "h-9 px-3 text-sm",
  lg: "h-11 px-3.5 text-sm",
};

const ICON_SIZES = {
  sm: "[&_svg]:size-[14px]",
  md: "[&_svg]:size-4",
  lg: "[&_svg]:size-[18px]",
};

function inputClasses(size, tone, hasLeading = false, hasTrailing = false) {
  return cx(
    "w-full rounded-[var(--ds-radius-sm)] border bg-[var(--ds-color-input)] text-[var(--ds-color-foreground)] shadow-none transition-colors duration-150 ease-out placeholder:text-[var(--ds-color-muted-foreground)] hover:bg-[var(--ds-color-input-hover,var(--ds-color-input))] focus:bg-[var(--ds-color-input-focus,var(--ds-color-input))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:bg-[var(--ds-color-muted)] disabled:text-[var(--ds-color-muted-foreground)] disabled:opacity-60 read-only:bg-[var(--ds-color-surface-subtle)] read-only:text-[var(--ds-color-muted-foreground)] motion-reduce:transition-none",
    tone === "error" ? "border-[var(--ds-color-destructive)]" : tone === "success" ? "border-[var(--ds-color-success)]" : "border-[var(--ds-color-border)] focus:border-[var(--ds-color-border-strong)]",
    INPUT_SIZES[size],
    hasLeading && "pl-9",
    hasTrailing && "pr-9",
  );
}

function Spinner() {
  return (
    <svg className="size-4 animate-spin motion-reduce:animate-none" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="3" className="opacity-25" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

export function InputWithValidation({ label = "Billing email", helperText = "Use the address that receives invoices.", validate = (value) => value.includes("@") ? undefined : "Enter a valid email address.", size = "md", id, className, value, defaultValue = "", onChange, ...props }) {
  const generatedId = useId(); const inputId = id ?? `input-${generatedId}`; const messageId = `${inputId}-message`;
  const [internalValue, setInternalValue] = useState(String(defaultValue ?? "")); const currentValue = value === undefined ? internalValue : String(value);
  const error = currentValue ? validate(currentValue) : undefined;
  function handleChange(event) { if (value === undefined) setInternalValue(event.target.value); onChange?.(event); }
  return <div className="w-full"><label htmlFor={inputId} className="mb-2 block text-[13px] font-medium leading-5 text-[var(--ds-color-foreground)]">{label}</label><input id={inputId} type="email" className={cx(inputClasses(size, error ? "error" : currentValue ? "success" : "default"), className)} value={currentValue} onChange={handleChange} aria-invalid={error ? true : undefined} aria-describedby={messageId} {...props} /><p id={messageId} className={cx("mt-2 text-xs", error ? "text-[var(--ds-color-destructive)]" : currentValue ? "text-[var(--ds-color-success)]" : "text-[var(--ds-color-muted-foreground)]")}>{error ? `Error: ${error}` : currentValue ? "Success: Email format looks correct." : helperText}</p></div>;
}

export default InputWithValidation;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# Input With Validation

Input with live validation state and messaging.

## Usage

```tsx
import { InputWithValidation } from './code';

<InputWithValidation label="Workspace name" placeholder="Acme design" />
```

## JavaScript

```jsx
import { InputWithValidation } from './code';

<InputWithValidation label="Billing email" placeholder="billing@example.com" />
```

## Props

| Name | Type | Default | Description |
|---|---|---:|---|
| `label` | `string` | component label | Visible label associated with the input. |
| `helperText` | `string` | `undefined` | Supporting text announced through `aria-describedby`. |
| `error` | `string` | `undefined` | Error message; sets `aria-invalid`. |
| `success` | `string` | `undefined` | Success message associated with the control. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Control height and text sizing. |
| `tone` | `"default" \| "error" \| "success"` | `"default"` | Visual state when no message prop overrides it. |
| `className` | `string` | `undefined` | Adds layout classes to the input element. |
| native input props | `InputHTMLAttributes<HTMLInputElement>` | — | Supports `value`, `defaultValue`, `onChange`, `name`, `id`, `placeholder`, `disabled`, `readOnly`, `required`, and `aria-*`. |

## States

Supports default, hover, focus-visible, disabled, readonly, error, success, and loading where applicable.

## Accessibility

Uses a native `input`, a visible `label`, associated helper/error text, `aria-invalid` for errors, and keyboard-accessible buttons for interactive controls.

## Styling

Built with React, Tailwind CSS, and DevSnips design tokens. No component-specific CSS file is required.

## Design Tokens

Visual decisions reference `React/DESIGN_TOKENS.md` rather than duplicating the token system.