Error

Error renders a validation message below a control: text-danger copy on a bg-danger/15 tinted container, announced to screen readers via role="alert". It pairs with interactive components that carry no invalid styling of their own — Select, Radio, Checkbox, Segment, Upload and the other non-text controls — while text inputs (Input, Password, Textarea, NumberInput, NumberField, InputOtp) keep their own invalid border state.

Installation

Usage

Basic Usage

Place it directly below the control it describes. Reserve a width on the wrapper (w-80 in the demo) so the full-width Error never stretches the layout when it appears.

"use client";

import { useState } from "react";
import { Error, Select } from "@/ui";

const options = [
  { label: "United States", value: "us" },
  { label: "United Kingdom", value: "uk" },
  { label: "Canada", value: "ca" },
];

export default function ErrorBasicDemo() {
  const [value, setValue] = useState<string | undefined>(undefined);

  return (
    <div className="w-80 max-w-full space-y-2">
      <Select
        options={options}
        placeholder="Select your country..."
        value={value}
        onValueChange={setValue}
      />
      {!value && <Error>Please select your country.</Error>}
    </div>
  );
}

Form / FormItem use it internally: when validation fails, the hint line is replaced by an Error container. styles.error / classNames.error on FormItem target it.

API Reference

Error

Behavior Notes

• Renders role="alert" so the message is announced when it appears.
• Purely presentational — visibility is yours to control (conditionally render it, or keep it mounted and toggle).
• bg-danger/15 reads correctly on every surface preset and in dark mode because both layers come from theme tokens.