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
  e85fc9d6_bbb6_486f_764e_953f6e52c49b["SelectInvalid()"]
  3a8312fa_c928_3d9a_d35c_25402491f197["select-invalid.tsx"]
  e85fc9d6_bbb6_486f_764e_953f6e52c49b -->|defined in| 3a8312fa_c928_3d9a_d35c_25402491f197
  style e85fc9d6_bbb6_486f_764e_953f6e52c49b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/select-invalid.tsx lines 11–30

export function SelectInvalid() {
  return (
    <Field data-invalid className="w-full max-w-48">
      <FieldLabel>Fruit</FieldLabel>
      <Select>
        <SelectTrigger aria-invalid>
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <FieldError>Please select a fruit.</FieldError>
    </Field>
  )
}