SelectInvalid() — ui Function Reference

Architecture documentation for the SelectInvalid() function in select-invalid.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ SelectInvalid() — ui Function Reference

Dependency Diagram

graph TD
  d11c3dae_f933_2719_e42c_debbff1e3d1c["SelectInvalid()"]
  35fe58a4_e602_9ea5_72d1_283f5cb1fc33["select-invalid.tsx"]
  d11c3dae_f933_2719_e42c_debbff1e3d1c -->|defined in| 35fe58a4_e602_9ea5_72d1_283f5cb1fc33
  style d11c3dae_f933_2719_e42c_debbff1e3d1c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/select-invalid.tsx lines 18–39

export function SelectInvalid() {
  return (
    <Field data-invalid className="w-full max-w-48">
      <FieldLabel>Fruit</FieldLabel>
      <Select items={items}>
        <SelectTrigger aria-invalid>
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {items.map((item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
      <FieldError>Please select a fruit.</FieldError>
    </Field>
  )
}