@neo4j-ndl/react 4.24.2 → 4.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.24.2",
+  "version": "4.25.1",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -62,6 +62,11 @@
       "require": "./lib/cjs/checkbox/index.js",
       "import": "./lib/esm/checkbox/index.js"
     },
+    "./checkbox-group": {
+      "types": "./lib/types/checkbox-group/index.d.ts",
+      "require": "./lib/cjs/checkbox-group/index.js",
+      "import": "./lib/esm/checkbox-group/index.js"
+    },
     "./clean-icon-button": {
       "types": "./lib/types/clean-icon-button/index.d.ts",
       "require": "./lib/cjs/clean-icon-button/index.js",
@@ -137,6 +142,11 @@
       "require": "./lib/cjs/dropzone/index.js",
       "import": "./lib/esm/dropzone/index.js"
     },
+    "./fieldset": {
+      "types": "./lib/types/fieldset/index.d.ts",
+      "require": "./lib/cjs/fieldset/index.js",
+      "import": "./lib/esm/fieldset/index.js"
+    },
     "./filled-button": {
       "types": "./lib/types/filled-button/index.d.ts",
       "require": "./lib/cjs/filled-button/index.js",
@@ -227,6 +237,11 @@
       "require": "./lib/cjs/radio/index.js",
       "import": "./lib/esm/radio/index.js"
     },
+    "./radio-group": {
+      "types": "./lib/types/radio-group/index.d.ts",
+      "require": "./lib/cjs/radio-group/index.js",
+      "import": "./lib/esm/radio-group/index.js"
+    },
     "./read-only-tag": {
       "types": "./lib/types/read-only-tag/index.d.ts",
       "require": "./lib/cjs/read-only-tag/index.js",
@@ -409,7 +424,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.23.1"
+    "@neo4j-ndl/base": "^4.23.2"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",

package/skills/ndl-react/SKILL.md

@@ -2,7 +2,7 @@
 name: ndl-react
 metadata:
   package: '@neo4j-ndl/react'
-  version: '4.24.2'
+  version: '4.25.1'
 description: >-
   Build and edit UI with the Neo4j Needle React design system
   (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
@@ -15,7 +15,7 @@ description: >-
 
 # Neo4j Needle (@neo4j-ndl/react)
 
-> 📌 Shipped with `@neo4j-ndl/react` v4.24.2. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v4.25.1. Once installed into your repo (e.g. via
 > `npx skills add`) this folder is detached from the package — the installed
 > package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
 > truth.
@@ -140,6 +140,7 @@ Import from `@neo4j-ndl/react`.
 | `Box` | [components/box.md](components/box.md) |  | 1 |
 | `Breadcrumbs` | [components/breadcrumbs.md](components/breadcrumbs.md) | ✅ | 4 |
 | `Checkbox` | [components/checkbox.md](components/checkbox.md) | ✅ | 9 |
+| `CheckboxGroup` | [components/checkbox-group.md](components/checkbox-group.md) | ✅ | 6 |
 | `CleanIconButton` | [components/clean-icon-button.md](components/clean-icon-button.md) | ✅ | 8 |
 | `ClipboardButton` | [components/clipboard-button.md](components/clipboard-button.md) |  | 7 |
 | `Code` | [components/code.md](components/code.md) | ✅ | 2 |
@@ -155,6 +156,7 @@ Import from `@neo4j-ndl/react`.
 | `Drawer` | [components/drawer.md](components/drawer.md) | ✅ | 8 |
 | `DropdownButton` | [components/dropdown-button.md](components/dropdown-button.md) |  | 7 |
 | `Dropzone` | [components/dropzone.md](components/dropzone.md) |  | 6 |
+| `Fieldset` | [components/fieldset.md](components/fieldset.md) | ✅ | 6 |
 | `FilledButton` | [components/filled-button.md](components/filled-button.md) |  | 0 |
 | `Flex` | [components/flex.md](components/flex.md) |  | 1 |
 | `GraphLabel` | [components/graph-label.md](components/graph-label.md) |  | 7 |
@@ -171,9 +173,10 @@ Import from `@neo4j-ndl/react`.
 | `Popover` | [components/popover.md](components/popover.md) | ✅ | 6 |
 | `ProgressBar` | [components/progress-bar.md](components/progress-bar.md) | ✅ | 3 |
 | `Radio` | [components/radio.md](components/radio.md) | ✅ | 7 |
+| `RadioGroup` | [components/radio-group.md](components/radio-group.md) | ✅ | 8 |
 | `ReadOnlyTag` | [components/read-only-tag.md](components/read-only-tag.md) |  | 4 |
 | `SegmentedControl` | [components/segmented-control.md](components/segmented-control.md) | ✅ | 5 |
-| `Select` | [components/select.md](components/select.md) |  | 13 |
+| `Select` | [components/select.md](components/select.md) |  | 14 |
 | `SelectIconButton` | [components/select-icon-button.md](components/select-icon-button.md) |  | 4 |
 | `SelectableTag` | [components/selectable-tag.md](components/selectable-tag.md) |  | 6 |
 | `SideNavigation` | [components/side-navigation.md](components/side-navigation.md) |  | 4 |

package/skills/ndl-react/components/checkbox-group.md

@@ -0,0 +1,195 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
+# CheckboxGroup
+
+Import: `import { CheckboxGroup } from '@neo4j-ndl/react'`
+
+## Props
+
+### CheckboxGroup
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ |  | The controls grouped by the fieldset |
+| `errorText` | `ReactNode` |  |  | Error message displayed below the grouped controls. When provided, it replaces `helpText` |
+| `hasRequiredIndicator` | `boolean` |  |  | Whether Required or Optional is shown at the end of the legend row |
+| `hasVisuallyHiddenLabel` | `boolean` |  |  | Whether the legend is clipped out of the layout, leaving it to screen readers only |
+| `helpText` | `ReactNode` |  |  | Assistive text displayed below the grouped controls |
+| `isDisabled` | `boolean` |  | `false` | Whether all native form controls in the fieldset are disabled |
+| `isRequired` | `boolean` |  | `false` | Whether the grouped field is required |
+| `label` | `ReactNode` | ✅ |  | The accessible label displayed in the fieldset legend |
+| `name` | `string` |  |  | Shared native name for checkbox form values |
+| `ref` | `Ref<HTMLFieldSetElement>` |  |  | A ref to apply to the root element. |
+
+Checked state remains on each `Checkbox`. Browsers cannot natively validate
+an “at least one” checkbox requirement, so applications should set
+`errorText` after validating a required group.
+
+## Accessibility
+
+`CheckboxGroup` renders a native `<fieldset>` and `<legend>`. The legend names
+the group, while every `Checkbox` keeps its own label. A shared `name` can be
+provided when checked values should be submitted under the same form key.
+
+Each native checkbox remains a separate Tab stop and Space toggles the focused
+checkbox. `isDisabled` disables the fieldset and every descendant control.
+
+Browsers cannot express an “at least one checkbox” constraint with native
+`required`; applying `required` to every checkbox would require every option.
+Use `isRequired` for the group’s required presentation, validate the selected
+values in the application, and provide `errorText` when validation fails.
+“Required” is included in the legend's accessible name.
+
+Help and error text are associated with the group through `aria-describedby`;
+individual checkboxes retain only descriptions supplied directly to them. An
+error replaces help text and sets `aria-invalid` on the group and its
+checkboxes.
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel"
+      helpText="Choose every channel you want to use."
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-disabled"
+      isDisabled
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Error
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-error"
+      errorText="Select at least one notification channel."
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Optional
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-optional"
+      hasRequiredIndicator
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Required
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <CheckboxGroup
+      label="Notification channels"
+      name="notification-channel-required"
+      hasRequiredIndicator
+      isRequired
+    >
+      <Checkbox label="Email" value="email" isDefaultChecked />
+      <Checkbox label="In-app" value="in-app" />
+      <Checkbox label="Mobile push" value="push" />
+    </CheckboxGroup>
+  );
+};
+
+export default Component;
+```
+
+### Visually Hidden Label
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, CheckboxGroup } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <>
+      <CheckboxGroup
+        label="Notification channels"
+        name="notification-channel-hidden"
+        hasVisuallyHiddenLabel
+      >
+        <Checkbox label="Email" value="email" isDefaultChecked />
+        <Checkbox label="In-app" value="in-app" />
+        <Checkbox label="Mobile push" value="push" />
+      </CheckboxGroup>
+    </>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/fieldset.md

@@ -0,0 +1,235 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
+# Fieldset
+
+Import: `import { Fieldset } from '@neo4j-ndl/react'`
+
+## Props
+
+### Fieldset
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ |  | The controls grouped by the fieldset |
+| `errorText` | `ReactNode` |  |  | Error message displayed below the grouped controls. When provided, it replaces `helpText` |
+| `hasRequiredIndicator` | `boolean` |  | `false` | Whether Required or Optional is shown at the end of the legend row |
+| `hasVisuallyHiddenLabel` | `boolean` |  | `false` | Whether the legend is clipped out of the layout, leaving it to screen readers only |
+| `helpText` | `ReactNode` |  |  | Assistive text displayed below the grouped controls |
+| `isDisabled` | `boolean` |  | `false` | Whether all native form controls in the fieldset are disabled |
+| `isRequired` | `boolean` |  | `false` | Whether the grouped field is required |
+| `label` | `ReactNode` | ✅ |  | The accessible label displayed in the fieldset legend |
+| `ref` | `Ref<HTMLFieldSetElement>` |  |  | A ref to apply to the root element. |
+
+Use `RadioGroup` or `CheckboxGroup` when the children are exclusively
+radios or checkboxes and should inherit shared group attributes.
+
+## Accessibility
+
+`Fieldset` renders a native `<fieldset>` whose first child is a `<legend>`.
+This gives the grouped controls a shared accessible name while each control
+keeps its own label.
+
+Help and error text are associated with the fieldset through
+`aria-describedby`. An error replaces help text, sets `aria-invalid`, and is
+announced by the shared polite live region. `isDisabled` uses the native
+`disabled` attribute, which disables descendant form controls. Because a
+generic fieldset cannot apply native required behavior to arbitrary children,
+`isRequired` adds “Required” to the legend's accessible name; consumers remain
+responsible for validating the controls.
+
+Use `hasVisuallyHiddenLabel` only when the same group name is already visible
+elsewhere. The legend remains available to assistive technology.
+
+Use `RadioGroup` for one-of-many radio choices and `CheckboxGroup` for related
+checkboxes. Use `Fieldset` directly for mixed or other related form controls.
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Fieldset
+      label="Team settings"
+      helpText="These settings apply to the whole team."
+    >
+      <TextInput label="Team name" placeholder="Graph Platform" />
+      <TextInput
+        label="Contact email"
+        placeholder="team@example.com"
+        htmlAttributes={{ type: 'email' }}
+      />
+      <TextArea
+        label="Team description"
+        placeholder="Describe what your team works on"
+      />
+      <Checkbox label="Allow other members to invite people" />
+    </Fieldset>
+  );
+};
+
+export default Component;
+```
+
+### Disabled
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import {
+  Checkbox,
+  Fieldset,
+  Radio,
+  Switch,
+  TextArea,
+  TextInput,
+  TimePicker,
+  TimeZonePicker,
+} from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Fieldset label="Team settings" isDisabled>
+      <TextInput label="Team name" placeholder="Graph Platform" />
+      <TextInput
+        label="Contact email"
+        placeholder="team@example.com"
+        htmlAttributes={{ type: 'email' }}
+      />
+      <TextArea
+        label="Team description"
+        placeholder="Describe what your team works on"
+      />
+      <Checkbox label="Allow other members to invite people" />
+      <Radio label="Use team defaults" />
+      <Switch label="Enable team notifications" />
+      <TimePicker label="Daily reminder time" />
+      <TimeZonePicker label="Team time zone" value="Europe/Stockholm" />
+    </Fieldset>
+  );
+};
+
+export default Component;
+```
+
+### Error
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Fieldset
+      label="Team settings"
+      errorText="Review the team settings before continuing."
+    >
+      <TextInput label="Team name" placeholder="Graph Platform" />
+      <TextInput
+        label="Contact email"
+        placeholder="team@example.com"
+        htmlAttributes={{ type: 'email' }}
+      />
+      <TextArea
+        label="Team description"
+        placeholder="Describe what your team works on"
+      />
+      <Checkbox label="Allow other members to invite people" />
+    </Fieldset>
+  );
+};
+
+export default Component;
+```
+
+### Optional
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Fieldset label="Team settings" hasRequiredIndicator>
+      <TextInput label="Team name" placeholder="Graph Platform" />
+      <TextInput
+        label="Contact email"
+        placeholder="team@example.com"
+        htmlAttributes={{ type: 'email' }}
+      />
+      <TextArea
+        label="Team description"
+        placeholder="Describe what your team works on"
+      />
+      <Checkbox label="Allow other members to invite people" />
+    </Fieldset>
+  );
+};
+
+export default Component;
+```
+
+### Required
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Fieldset label="Team settings" hasRequiredIndicator isRequired>
+      <TextInput label="Team name" placeholder="Graph Platform" />
+      <TextInput
+        label="Contact email"
+        placeholder="team@example.com"
+        htmlAttributes={{ type: 'email' }}
+      />
+      <TextArea
+        label="Team description"
+        placeholder="Describe what your team works on"
+      />
+      <Checkbox label="Allow other members to invite people" />
+    </Fieldset>
+  );
+};
+
+export default Component;
+```
+
+### Visually Hidden Label
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Checkbox, Fieldset, TextArea, TextInput } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <>
+      <Fieldset label="Team settings" hasVisuallyHiddenLabel>
+        <TextInput label="Team name" placeholder="Graph Platform" />
+        <TextInput
+          label="Contact email"
+          placeholder="team@example.com"
+          htmlAttributes={{ type: 'email' }}
+        />
+        <TextArea
+          label="Team description"
+          placeholder="Describe what your team works on"
+        />
+        <Checkbox label="Allow other members to invite people" />
+      </Fieldset>
+    </>
+  );
+};
+
+export default Component;
+```