Skip to content

feat(filed): add field item component #594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anxndsgn wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat(filed): add field item component #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7ff1f68
feat: add FieldItem component
anxndsgn Dec 14, 2025
5e5b2c7
refactor: update checkbox and radio group components to use FieldItem…
anxndsgn Dec 14, 2025
50f8fe1
refactor: update registry
anxndsgn Dec 14, 2025
4ca1666
refactor: update FieldItem alignment
anxndsgn Dec 14, 2025
a86c33f
refactor: add FieldItem usage in checkbox and radio group components …
anxndsgn Dec 14, 2025
4dcf0c9
refactor: restructure filed-14 to utilize FieldItem for checkbox group
anxndsgn Dec 14, 2025
147a5f8
refactor: simplify FieldItem structure in radio group component
anxndsgn Dec 14, 2025
10c1ded
refactor: sync ui and update registry
anxndsgn Dec 14, 2025
51a8491
refactor: streamline Fieldset rendering in checkbox and radio group c…
anxndsgn Dec 14, 2025
d3662dd
refactor: update registry
anxndsgn Dec 14, 2025
c07c56c
chore: regenerate registry after rebase
anxndsgn Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/ui/public/r/field.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"files": [
{
"path": "registry/default/ui/field.tsx",
"content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Field({ className, ...props }: FieldPrimitive.Root.Props) {\n return (\n <FieldPrimitive.Root\n className={cn(\"flex flex-col items-start gap-2\", className)}\n data-slot=\"field\"\n {...props}\n />\n );\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n return (\n <FieldPrimitive.Label\n className={cn(\n \"inline-flex items-center gap-2 font-medium text-base/4.5 sm:text-sm/4\",\n className,\n )}\n data-slot=\"field-label\"\n {...props}\n />\n );\n}\n\nfunction FieldDescription({\n className,\n ...props\n}: FieldPrimitive.Description.Props) {\n return (\n <FieldPrimitive.Description\n className={cn(\"text-muted-foreground text-xs\", className)}\n data-slot=\"field-description\"\n {...props}\n />\n );\n}\n\nfunction FieldError({ className, ...props }: FieldPrimitive.Error.Props) {\n return (\n <FieldPrimitive.Error\n className={cn(\"text-destructive-foreground text-xs\", className)}\n data-slot=\"field-error\"\n {...props}\n />\n );\n}\n\nconst FieldControl = FieldPrimitive.Control;\nconst FieldValidity = FieldPrimitive.Validity;\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldControl,\n FieldValidity,\n};\n",
"content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Field({ className, ...props }: FieldPrimitive.Root.Props) {\n return (\n <FieldPrimitive.Root\n className={cn(\"flex flex-col items-start gap-2\", className)}\n data-slot=\"field\"\n {...props}\n />\n );\n}\n\nfunction FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {\n return (\n <FieldPrimitive.Item\n className={cn(\"inline-flex items-start gap-2\", className)}\n data-slot=\"field-item\"\n {...props}\n />\n );\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n return (\n <FieldPrimitive.Label\n className={cn(\n \"inline-flex items-center gap-2 font-medium text-base/4.5 sm:text-sm/4\",\n className,\n )}\n data-slot=\"field-label\"\n {...props}\n />\n );\n}\n\nfunction FieldDescription({\n className,\n ...props\n}: FieldPrimitive.Description.Props) {\n return (\n <FieldPrimitive.Description\n className={cn(\"text-muted-foreground text-xs\", className)}\n data-slot=\"field-description\"\n {...props}\n />\n );\n}\n\nfunction FieldError({ className, ...props }: FieldPrimitive.Error.Props) {\n return (\n <FieldPrimitive.Error\n className={cn(\"text-destructive-foreground text-xs\", className)}\n data-slot=\"field-error\"\n {...props}\n />\n );\n}\n\nconst FieldControl = FieldPrimitive.Control;\nconst FieldValidity = FieldPrimitive.Validity;\n\nexport {\n Field,\n FieldItem,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldControl,\n FieldValidity,\n};\n",
"type": "registry:ui"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/public/r/p-checkbox-group-5.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"files": [
{
"path": "registry/default/particles/p-checkbox-group-5.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n const [loading, setLoading] = React.useState(false);\n const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setLoading(true);\n await new Promise((r) => setTimeout(r, 800));\n setLoading(false);\n const frameworks = formData.getAll(\"frameworks\") as string[];\n alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n };\n\n return (\n <Form className=\"max-w-[160px]\" onSubmit={onSubmit}>\n <Field\n className=\"gap-4\"\n name=\"frameworks\"\n render={(props) => <Fieldset {...props} />}\n >\n <Label className=\"font-normal\" render={<FieldsetLegend />}>\n Frameworks\n </Label>\n <CheckboxGroup defaultValue={[\"next\"]} disabled={loading}>\n <FieldLabel>\n <Checkbox value=\"next\" />\n Next.js\n </FieldLabel>\n <FieldLabel>\n <Checkbox value=\"vite\" />\n Vite\n </FieldLabel>\n <FieldLabel>\n <Checkbox value=\"astro\" />\n Astro\n </FieldLabel>\n </CheckboxGroup>\n </Field>\n <Button disabled={loading} type=\"submit\">\n Submit\n </Button>\n </Form>\n );\n}\n",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n Field,\n FieldDescription,\n FieldItem,\n FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nexport default function Particle() {\n const [loading, setLoading] = React.useState(false);\n const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setLoading(true);\n await new Promise((r) => setTimeout(r, 800));\n setLoading(false);\n const frameworks = formData.getAll(\"frameworks\") as string[];\n alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n };\n\n return (\n <Form className=\"max-w-xl\" onSubmit={onSubmit}>\n <Field name=\"frameworks\">\n <Fieldset\n className=\"gap-4\"\n render={<CheckboxGroup defaultValue={[\"next\"]} disabled={loading} />}\n >\n <FieldsetLegend className=\"font-medium text-sm\">\n Frameworks\n </FieldsetLegend>\n <FieldItem>\n <Checkbox value=\"next\" />\n <div className=\"flex flex-col items-start gap-2\">\n <FieldLabel>Next.js</FieldLabel>\n <FieldDescription>\n Next.js is a React framework for building web applications.\n </FieldDescription>\n </div>\n </FieldItem>\n <FieldItem>\n <Checkbox value=\"vite\" />\n <FieldLabel>Vite</FieldLabel>\n </FieldItem>\n <FieldItem>\n <Checkbox value=\"astro\" />\n <FieldLabel>Astro</FieldLabel>\n </FieldItem>\n </Fieldset>\n </Field>\n <Button disabled={loading} type=\"submit\">\n Submit\n </Button>\n </Form>\n );\n}\n",
"type": "registry:block"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/public/r/p-field-13.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"files": [
{
"path": "registry/default/particles/p-field-13.tsx",
"content": "\"use client\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\n\nexport default function Particle() {\n return (\n <Fieldset className=\"gap-4\">\n <FieldsetLegend className=\"font-medium text-sm\">\n Frameworks\n </FieldsetLegend>\n <CheckboxGroup defaultValue={[\"react\"]}>\n <Field name=\"frameworks\">\n <FieldLabel>\n <Checkbox value=\"react\" /> React\n </FieldLabel>\n </Field>\n <Field name=\"frameworks\">\n <FieldLabel>\n <Checkbox value=\"vue\" /> Vue\n </FieldLabel>\n </Field>\n <Field name=\"frameworks\">\n <FieldLabel>\n <Checkbox value=\"svelte\" /> Svelte\n </FieldLabel>\n </Field>\n </CheckboxGroup>\n </Fieldset>\n );\n}\n",
"content": "\"use client\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldItem, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\n\nexport default function Particle() {\n return (\n <Field name=\"frameworks\">\n <Fieldset\n className=\"gap-4\"\n render={<CheckboxGroup defaultValue={[\"react\"]} />}\n >\n <FieldsetLegend className=\"font-medium text-sm\">\n Frameworks\n </FieldsetLegend>\n <FieldItem>\n <Checkbox value=\"react\" />\n <FieldLabel>React</FieldLabel>\n </FieldItem>\n <FieldItem>\n <Checkbox value=\"vue\" />\n <FieldLabel>Vue</FieldLabel>\n </FieldItem>\n <FieldItem>\n <Checkbox value=\"svelte\" />\n <FieldLabel>Svelte</FieldLabel>\n </FieldItem>\n </Fieldset>\n </Field>\n );\n}\n",
"type": "registry:block"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/public/r/p-field-14.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"files": [
{
"path": "registry/default/particles/p-field-14.tsx",
"content": "\"use client\";\n\nimport {\n Field,\n FieldDescription,\n FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n return (\n <Field\n className=\"gap-4\"\n name=\"plan\"\n render={(props) => <Fieldset {...props} />}\n >\n <FieldsetLegend className=\"font-medium text-sm\">\n Choose Plan\n </FieldsetLegend>\n <RadioGroup defaultValue=\"free\">\n <FieldLabel>\n <Radio value=\"free\" /> Free\n </FieldLabel>\n <FieldLabel>\n <Radio value=\"pro\" /> Pro\n </FieldLabel>\n <FieldLabel>\n <Radio value=\"enterprise\" /> Enterprise\n </FieldLabel>\n </RadioGroup>\n <FieldDescription>Select the plan that fits your needs.</FieldDescription>\n </Field>\n );\n}\n",
"content": "\"use client\";\n\nimport {\n Field,\n FieldDescription,\n FieldItem,\n FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n return (\n <Field name=\"plan\">\n <Fieldset className=\"gap-4\" render={<RadioGroup defaultValue=\"free\" />}>\n <FieldsetLegend className=\"font-medium text-sm\">\n Choose Plan\n </FieldsetLegend>\n <FieldItem>\n <Radio value=\"free\" />\n <FieldLabel>Free</FieldLabel>\n </FieldItem>\n <FieldItem>\n <Radio value=\"pro\" />\n <FieldLabel>Pro</FieldLabel>\n </FieldItem>\n <FieldItem>\n <Radio value=\"enterprise\" />\n <FieldLabel>Enterprise</FieldLabel>\n </FieldItem>\n </Fieldset>\n <FieldDescription>Select the plan that fits your needs.</FieldDescription>\n </Field>\n );\n}\n",
"type": "registry:block"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/public/r/p-radio-group-5.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"files": [
{
"path": "registry/default/particles/p-radio-group-5.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n const [loading, setLoading] = React.useState(false);\n\n const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setLoading(true);\n await new Promise((r) => setTimeout(r, 800));\n setLoading(false);\n alert(`Selected: ${formData.get(\"frameworks\")}`);\n };\n\n return (\n <Form className=\"max-w-[160px]\" onSubmit={onSubmit}>\n <Field\n className=\"gap-4\"\n name=\"frameworks\"\n render={(props) => <Fieldset {...props} />}\n >\n <FieldsetLegend className=\"font-medium text-sm\">\n Frameworks\n </FieldsetLegend>\n <RadioGroup defaultValue=\"next\">\n <FieldLabel>\n <Radio disabled={loading} value=\"next\" /> Next.js\n </FieldLabel>\n <FieldLabel>\n <Radio disabled={loading} value=\"vite\" /> Vite\n </FieldLabel>\n <FieldLabel>\n <Radio disabled={loading} value=\"astro\" /> Astro\n </FieldLabel>\n </RadioGroup>\n </Field>\n <Button disabled={loading} type=\"submit\">\n Submit\n </Button>\n </Form>\n );\n}\n",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n Field,\n FieldDescription,\n FieldItem,\n FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n const [loading, setLoading] = React.useState(false);\n\n const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setLoading(true);\n await new Promise((r) => setTimeout(r, 800));\n setLoading(false);\n alert(`Selected: ${formData.get(\"frameworks\")}`);\n };\n\n return (\n <Form className=\"max-w-xl\" onSubmit={onSubmit}>\n <Field name=\"frameworks\">\n <Fieldset className=\"gap-4\" render={<RadioGroup defaultValue=\"next\" />}>\n <FieldsetLegend className=\"font-medium text-sm\">\n Frameworks\n </FieldsetLegend>\n <FieldItem>\n <Radio disabled={loading} value=\"next\" />\n <div className=\"flex flex-col items-start gap-2\">\n <FieldLabel> Next.js</FieldLabel>\n <FieldDescription>\n Next.js is a React framework for building web applications.\n </FieldDescription>\n </div>\n </FieldItem>\n <FieldItem>\n <Radio disabled={loading} value=\"vite\" />\n <FieldLabel>Vite</FieldLabel>\n </FieldItem>\n <FieldItem>\n <Radio disabled={loading} value=\"astro\" />\n <FieldLabel>Astro</FieldLabel>\n </FieldItem>\n </Fieldset>\n </Field>\n <Button disabled={loading} type=\"submit\">\n Submit\n </Button>\n </Form>\n );\n}\n",
"type": "registry:block"
}
],
Expand Down
52 changes: 30 additions & 22 deletions apps/ui/registry/default/particles/p-checkbox-group-5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,14 @@ import * as React from "react";
import { Button } from "@/registry/default/ui/button";
import { Checkbox } from "@/registry/default/ui/checkbox";
import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
import { Field, FieldLabel } from "@/registry/default/ui/field";
import {
Field,
FieldDescription,
FieldItem,
FieldLabel,
} from "@/registry/default/ui/field";
import { Fieldset, FieldsetLegend } from "@/registry/default/ui/fieldset";
import { Form } from "@/registry/default/ui/form";
import { Label } from "@/registry/default/ui/label";

export default function Particle() {
const [loading, setLoading] = React.useState(false);
Expand All @@ -23,29 +27,33 @@ export default function Particle() {
};

return (
<Form className="max-w-[160px]" onSubmit={onSubmit}>
<Field
className="gap-4"
name="frameworks"
render={(props) => <Fieldset {...props} />}
>
<Label className="font-normal" render={<FieldsetLegend />}>
Frameworks
</Label>
<CheckboxGroup defaultValue={["next"]} disabled={loading}>
<FieldLabel>
<Form className="max-w-xl" onSubmit={onSubmit}>
<Field name="frameworks">
<Fieldset
className="gap-4"
render={<CheckboxGroup defaultValue={["next"]} disabled={loading} />}
>
<FieldsetLegend className="font-medium text-sm">
Frameworks
</FieldsetLegend>
<FieldItem>
<Checkbox value="next" />
Next.js
</FieldLabel>
<FieldLabel>
<div className="flex flex-col items-start gap-2">
<FieldLabel>Next.js</FieldLabel>
<FieldDescription>
Next.js is a React framework for building web applications.
</FieldDescription>
</div>
</FieldItem>
<FieldItem>
<Checkbox value="vite" />
Vite
</FieldLabel>
<FieldLabel>
<FieldLabel>Vite</FieldLabel>
</FieldItem>
<FieldItem>
<Checkbox value="astro" />
Astro
</FieldLabel>
</CheckboxGroup>
<FieldLabel>Astro</FieldLabel>
</FieldItem>
</Fieldset>
</Field>
<Button disabled={loading} type="submit">
Submit
Expand Down
46 changes: 23 additions & 23 deletions apps/ui/registry/default/particles/p-field-13.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,32 @@

import { Checkbox } from "@/registry/default/ui/checkbox";
import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
import { Field, FieldLabel } from "@/registry/default/ui/field";
import { Field, FieldItem, FieldLabel } from "@/registry/default/ui/field";
import { Fieldset, FieldsetLegend } from "@/registry/default/ui/fieldset";

export default function Particle() {
return (
<Fieldset className="gap-4">
<FieldsetLegend className="font-medium text-sm">
Frameworks
</FieldsetLegend>
<CheckboxGroup defaultValue={["react"]}>
<Field name="frameworks">
<FieldLabel>
<Checkbox value="react" /> React
</FieldLabel>
</Field>
<Field name="frameworks">
<FieldLabel>
<Checkbox value="vue" /> Vue
</FieldLabel>
</Field>
<Field name="frameworks">
<FieldLabel>
<Checkbox value="svelte" /> Svelte
</FieldLabel>
</Field>
</CheckboxGroup>
</Fieldset>
<Field name="frameworks">
<Fieldset
className="gap-4"
render={<CheckboxGroup defaultValue={["react"]} />}
>
<FieldsetLegend className="font-medium text-sm">
Frameworks
</FieldsetLegend>
<FieldItem>
<Checkbox value="react" />
<FieldLabel>React</FieldLabel>
</FieldItem>
<FieldItem>
<Checkbox value="vue" />
<FieldLabel>Vue</FieldLabel>
</FieldItem>
<FieldItem>
<Checkbox value="svelte" />
<FieldLabel>Svelte</FieldLabel>
</FieldItem>
</Fieldset>
</Field>
);
}
Loading
Loading