{ "schemaVersion": 1, "name": "field", "useFor": "Wrap every form control in Field with a FieldLabel above it; add FieldDescription for a hint (Enter a vault key or generate a random one) and FieldError, with data-invalid on the Field and aria-invalid on the control, when the value is rejected. Group fields in FieldGroup, related choices in FieldSet with a FieldLegend. Put an action beside the label (Forgot password?) in a row with justify-between. Use orientation horizontal for a label beside its control, and FieldSeparator with \"or\" between a form and other ways in.", "constraints": [ "A red label on an invalid field", "A placeholder as the only label", "Errors larger than 12px", "Fields closer than 12px" ], "documentation": "", "source": "Figma 427:2715: Login (Email address, Password, Forgot password?, or), Vault (Vault key and its description), Create Agent Identity (is not available, Will be displayed as)", "exports": [ "Field", "FieldContent", "FieldDescription", "FieldError", "FieldGroup", "FieldLabel", "FieldLegend", "FieldSeparator", "FieldSet", "FieldTitle" ], "client": true, "docsUrl": "https://inkbox-ds.vercel.app/components/field", "markdownUrl": "https://inkbox-ds.vercel.app/r/field.md", "examples": [ { "path": "examples/field.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport function Preview() {\n return (\n
\n \n \n Email address\n \n \n \n
\n Password\n \n Forgot password?\n \n
\n \n \n \n or\n \n \n
\n );\n}\n\nexport function Description() {\n return (\n \n Vault key\n Enter a vault key or generate a random one. You'll need this to unlock the vault.\n \n \n );\n}\n\nexport function Invalid() {\n return (\n \n Agent handle\n \n
\n Will be displayed as\n @acme-support\n (is not available)\n
\n \n );\n}\n\nexport function Horizontal() {\n return (\n \n \n \n Retention\n Days to keep delivered messages before they are deleted.\n \n \n \n \n Display name\n \n \n \n );\n}\n\nexport function Fieldset() {\n return (\n
\n Webhook destination\n Inkbox signs every delivery with the key for this agent identity.\n \n \n Endpoint URL\n \n \n \n Signing secret\n \n \n \n \n
\n );\n}\n", "exports": [ "Preview", "Description", "Invalid", "Horizontal", "Fieldset" ], "requires": [ "field", "button", "input" ], "packages": [], "previews": [ { "name": "Preview", "url": "https://inkbox-ds.vercel.app/preview/field/Preview" }, { "name": "Description", "url": "https://inkbox-ds.vercel.app/preview/field/Description" }, { "name": "Invalid", "url": "https://inkbox-ds.vercel.app/preview/field/Invalid" }, { "name": "Horizontal", "url": "https://inkbox-ds.vercel.app/preview/field/Horizontal" }, { "name": "Fieldset", "url": "https://inkbox-ds.vercel.app/preview/field/Fieldset" } ] } ], "type": "ui", "title": "Field", "description": "A field's label, control, description and error stacked 4px apart, fields 12px apart, with the 'or' hairline between two ways in.", "surface": "site", "kinds": [], "requires": [ "theme", "label", "utils" ], "packages": [ "class-variance-authority" ], "files": [ { "path": "components/ui/field.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { Label } from \"@/components/ui/label\";\nimport { cn } from \"@/lib/utils\";\n\n// A form's fields as the console lays them out (Figma 427:2715, Login, Vault, Create Agent Identity). A field is its\n// 14px label on a 24px line, 4px above the control; fields sit 12px apart. A description under it is 14px muted\n// (Vault key: \"Enter a vault key or generate a random one\"); an error is 12px red (is not available). \"or\" between two\n// ways in is 14px muted on a hairline. A field marked data-invalid keeps its label ink: only the control and the\n// message turn red.\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n return
[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\", className)} {...props} />;\n}\n\nfunction FieldLegend({ className, variant = \"legend\", ...props }: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n return (\n \n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return
[data-slot=field-group]]:gap-4\", className)} {...props} />;\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-1 data-[disabled=true]:opacity-50\", {\n variants: {\n orientation: {\n // Label over control (Email address over its field).\n vertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n // Label beside its control (a channel row and its switch, a checkbox and its label).\n horizontal: \"flex-row items-center gap-3 [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],&>[role=radio]]:mt-0.5\",\n // Over on a narrow form, beside from 28rem of container.\n responsive: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-3 @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n },\n },\n defaultVariants: { orientation: \"vertical\" },\n});\n\nfunction Field({ className, orientation = \"vertical\", ...props }: React.ComponentProps<\"div\"> & VariantProps) {\n return
;\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\n// A label that wraps a whole field becomes a choice card: the field edge and 8px corners, 14px in; the checked one takes\n// the purple edge on the lilac.\nfunction FieldLabel({ className, ...props }: React.ComponentProps) {\n return (\n [data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-control has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-line-field has-[>[data-slot=field]]:transition-[background-color,border-color] has-[>[data-slot=field]]:duration-150 has-[>[data-slot=field]]:ease-out *:data-[slot=field]:p-3.5 has-[>[data-slot=field]]:hover:bg-subtle has-data-[state=checked]:border-line-brand has-data-[state=checked]:bg-subtle motion-reduce:transition-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return (\n a]:text-fg-brand [&>a]:underline-offset-4 [&>a:hover]:underline\",\n className,\n )}\n {...props}\n />\n );\n}\n\n/** The \"or\" between two ways in: a hairline across the form with a 14px muted word on the page color. */\nfunction FieldSeparator({ children, className, ...props }: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n return (\n
\n
\n {children && (\n \n {children}\n \n )}\n
\n );\n}\n\nfunction FieldError({ className, children, errors, ...props }: React.ComponentProps<\"div\"> & { errors?: Array<{ message?: string } | undefined> }) {\n const content = React.useMemo(() => {\n if (children) return children;\n if (!errors?.length) return null;\n const unique = [...new Map(errors.map((error) => [error?.message, error])).values()];\n if (unique.length === 1) return unique[0]?.message;\n return
    {unique.map((error, index) => error?.message &&
  • {error.message}
    • )}
;\n }, [children, errors]);\n if (!content) return null;\n return (\n
\n {content}\n
\n );\n}\n\nexport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };\n" } ] }