diff --git a/bulma-ui/src/form/DateInput.tsx b/bulma-ui/src/form/DateInput.tsx
index 2d5c29b8b..e0faf4fc5 100644
--- a/bulma-ui/src/form/DateInput.tsx
+++ b/bulma-ui/src/form/DateInput.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from './Field';
 import { Control, ControlBaseProps } from './Control';
 import { DateInputBase, DateInputBaseProps } from './DateInputBase';
 import { useInsideField, useInsideControl } from './FormContext';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the DateInput convenience wrapper. Extends `DateInputBaseProps`
@@ -15,11 +16,11 @@ import { useInsideField, useInsideControl } from './FormContext';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
  */
 export interface DateInputProps extends DateInputBaseProps {
-  /** Field label (component auto-wraps in a `Field` if not already inside). */
+  /** Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: FieldProps['labelSize'];
-  /** Props for the label element. */
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
   labelProps?: FieldProps['labelProps'];
   /** Render the field with horizontal layout. */
   horizontal?: boolean;
@@ -98,6 +99,13 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
   ) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: baseProps.id,
+      labelProps,
+      // Inline mode renders a bare calendar with no input to label.
+      rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
       [`is-${messageColor}`]: !!messageColor,
     });
@@ -107,6 +115,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
     let content: React.ReactNode = (
       <DateInputBase
         ref={ref}
+        id={controlId}
         {...baseProps}
         triggerIcon={baseProps.triggerIcon ?? !isLoading}
       />
@@ -142,7 +151,7 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/DateTimeInput.tsx b/bulma-ui/src/form/DateTimeInput.tsx
index 5fb88b649..bd615edfc 100644
--- a/bulma-ui/src/form/DateTimeInput.tsx
+++ b/bulma-ui/src/form/DateTimeInput.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from './Field';
 import { Control, ControlBaseProps } from './Control';
 import { DateTimeInputBase, DateTimeInputBaseProps } from './DateTimeInputBase';
 import { useInsideField, useInsideControl } from './FormContext';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the DateTimeInput convenience wrapper. Extends
@@ -13,11 +14,11 @@ import { useInsideField, useInsideControl } from './FormContext';
  * @extraProp {boolean} [required=false] - Marks the field as required for native HTML form validation.
  */
 export interface DateTimeInputProps extends DateTimeInputBaseProps {
-  /** Field label. */
+  /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: FieldProps['labelSize'];
-  /** Props for the label element. */
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
   labelProps?: FieldProps['labelProps'];
   /** Render the field with horizontal layout. */
   horizontal?: boolean;
@@ -96,6 +97,13 @@ export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
   ) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: baseProps.id,
+      labelProps,
+      // Inline mode renders a bare picker with no input to label.
+      rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
       [`is-${messageColor}`]: !!messageColor,
     });
@@ -105,6 +113,7 @@ export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
     let content: React.ReactNode = (
       <DateTimeInputBase
         ref={ref}
+        id={controlId}
         {...baseProps}
         triggerIcon={baseProps.triggerIcon ?? !isLoading}
       />
@@ -140,7 +149,7 @@ export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/Field.tsx b/bulma-ui/src/form/Field.tsx
index eb6dd0fc7..6e60b7c56 100644
--- a/bulma-ui/src/form/Field.tsx
+++ b/bulma-ui/src/form/Field.tsx
@@ -24,11 +24,11 @@ export interface FieldProps
   hasAddons?: boolean | 'centered' | 'right';
   /** Constrains the field to its content's width (used inside horizontal field bodies). */
   narrow?: boolean;
-  /** Field label, rendered above the widget. */
+  /** Field label, rendered above the widget. `Field` itself does not associate it with any control — pass `labelProps={{ htmlFor }}` and a matching `id` on your control (the single-control convenience inputs do this automatically when they render their own `Field`). */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: 'small' | 'normal' | 'medium' | 'large';
-  /** Props for the label element. */
+  /** Props for the label element — where `htmlFor` goes when composing. */
   labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
     [key: string]: unknown;
   };
diff --git a/bulma-ui/src/form/File.tsx b/bulma-ui/src/form/File.tsx
index 4079e5e1e..eb96ed589 100644
--- a/bulma-ui/src/form/File.tsx
+++ b/bulma-ui/src/form/File.tsx
@@ -9,6 +9,7 @@ import { useConfig } from '../helpers/Config';
 import { useInsideField } from './FormContext';
 import { Field } from './Field';
 import { FormFieldProps } from './fieldProps';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the File component.
@@ -21,6 +22,12 @@ export interface FileProps
     >,
     Omit<BulmaClassesProps, 'color'>,
     FormFieldProps {
+  /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field` (label that `Field` yourself). */
+  label?: React.ReactNode;
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+    [key: string]: unknown;
+  };
   /** Bulma color modifier for the file input. */
   color?:
     | 'primary'
@@ -96,6 +103,12 @@ export const File = forwardRef<HTMLInputElement, FileProps>(
     ref
   ) => {
     const insideField = useInsideField();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: props.id,
+      labelProps,
+      rendersLabel: !insideField,
+    });
     const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
       color,
@@ -142,6 +155,7 @@ export const File = forwardRef<HTMLInputElement, FileProps>(
               inputClassName
             )}
             type="file"
+            id={controlId}
             {...rest}
           />
           <span className={usePrefixedClassNames('file-cta')}>
@@ -173,7 +187,7 @@ export const File = forwardRef<HTMLInputElement, FileProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/Input.tsx b/bulma-ui/src/form/Input.tsx
index d412ba913..057241b50 100644
--- a/bulma-ui/src/form/Input.tsx
+++ b/bulma-ui/src/form/Input.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from './Field';
 import { Control, ControlBaseProps } from './Control';
 import { InputBase, InputBaseProps } from './InputBase';
 import { useInsideField, useInsideControl } from './FormContext';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the Input component.
@@ -13,11 +14,11 @@ import { useInsideField, useInsideControl } from './FormContext';
  * Control-level (icons, loading) props.
  */
 export interface InputProps extends InputBaseProps {
-  /** Field label. */
+  /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: FieldProps['labelSize'];
-  /** Props for the label element. */
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
   labelProps?: FieldProps['labelProps'];
   /** Horizontal field layout. */
   horizontal?: boolean;
@@ -105,11 +106,17 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: inputProps.id,
+      labelProps,
+      rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
       [`is-${messageColor}`]: !!messageColor,
     });
 
-    let content = <InputBase ref={ref} {...inputProps} />;
+    let content = <InputBase ref={ref} id={controlId} {...inputProps} />;
 
     if (!insideControl) {
       content = (
@@ -139,7 +146,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/Numberinput.tsx b/bulma-ui/src/form/Numberinput.tsx
index e37816238..0fd2850d8 100644
--- a/bulma-ui/src/form/Numberinput.tsx
+++ b/bulma-ui/src/form/Numberinput.tsx
@@ -5,6 +5,7 @@ import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';
 import { useInsideField } from './FormContext';
 import { Field } from './Field';
 import { FormFieldProps } from './fieldProps';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /** Valid sizes for the Numberinput component. */
 export type NumberinputSize = 'small' | 'medium' | 'large';
@@ -43,6 +44,12 @@ export interface NumberinputProps
     >,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,
     FormFieldProps {
+  /** Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when no Field wrapper is rendered (inside a `Field`, or plusminus `bare`). */
+  label?: React.ReactNode;
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+    [key: string]: unknown;
+  };
   /** Controlled value. */
   value?: number;
   /** Default value for uncontrolled usage. */
@@ -175,6 +182,14 @@ export const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(
     const isAddons = compact || isStepper;
     const effectiveControlsPosition = isStepper ? 'right' : controlsPosition;
 
+    // The plusminus bare branch renders no Field and no label at all.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: props.id,
+      labelProps,
+      rendersLabel: !insideField && (isStepper || !effectiveBare),
+    });
+
     // Clamp value to min/max
     const clampValue = useCallback(
       (val: number): number => {
@@ -324,6 +339,7 @@ export const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(
           aria-valuenow={currentValue ?? undefined}
           aria-valuemin={min}
           aria-valuemax={max}
+          id={controlId}
           {...rest}
         />
       </div>
@@ -366,7 +382,7 @@ export const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(
           <Field
             label={label}
             labelSize={labelSize}
-            labelProps={labelProps}
+            labelProps={fieldLabelProps}
             horizontal={horizontal}
             className={fieldClassName}
           >
@@ -494,7 +510,7 @@ export const Numberinput = forwardRef<HTMLInputElement, NumberinputProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/Select.tsx b/bulma-ui/src/form/Select.tsx
index bbbad0983..d5e712fcb 100644
--- a/bulma-ui/src/form/Select.tsx
+++ b/bulma-ui/src/form/Select.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from './Field';
 import { Control, ControlBaseProps } from './Control';
 import { SelectBase, SelectBaseProps } from './SelectBase';
 import { useInsideField, useInsideControl } from './FormContext';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the Select component.
@@ -13,11 +14,11 @@ import { useInsideField, useInsideControl } from './FormContext';
  * Control-level (icons, loading) props.
  */
 export interface SelectProps extends SelectBaseProps {
-  /** Field label. */
+  /** Field label. Automatically associated with the select via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: FieldProps['labelSize'];
-  /** Props for the label element. */
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
   labelProps?: FieldProps['labelProps'];
   /** Horizontal field layout. */
   horizontal?: boolean;
@@ -89,11 +90,17 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: selectProps.id,
+      labelProps,
+      rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
       [`is-${messageColor}`]: !!messageColor,
     });
 
-    let content = <SelectBase ref={ref} {...selectProps} />;
+    let content = <SelectBase ref={ref} id={controlId} {...selectProps} />;
 
     if (!insideControl) {
       content = (
@@ -118,7 +125,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/Slider.tsx b/bulma-ui/src/form/Slider.tsx
index 584292725..79c297769 100644
--- a/bulma-ui/src/form/Slider.tsx
+++ b/bulma-ui/src/form/Slider.tsx
@@ -17,6 +17,7 @@ import { useInsideField, useInsideControl } from './FormContext';
 import { Field } from './Field';
 import { Control } from './Control';
 import { FormFieldProps } from './fieldProps';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /** Valid sizes for the Slider component. */
 export type SliderSize = 'small' | 'medium' | 'large';
@@ -52,6 +53,12 @@ interface SliderBaseProps
     >,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'>,
     FormFieldProps {
+  /** Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field` (label that `Field` yourself). */
+  label?: React.ReactNode;
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement> & {
+    [key: string]: unknown;
+  };
   /** Minimum value. */
   min?: number;
   /** Maximum value. */
@@ -293,6 +300,14 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const { bulmaHelperClasses, rest } = useBulmaClasses(restProps);
+    // In range mode the low thumb carries `rest` (and any user id), so the
+    // label targets it; each thumb keeps its own aria-label for AT.
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: restProps.id,
+      labelProps,
+      rendersLabel: !insideField,
+    });
 
     // Resolve tooltip mode: explicit tooltip prop takes precedence, else showOutput maps to 'auto'
     const tooltipMode: SliderTooltip =
@@ -661,6 +676,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
           aria-orientation={isVertical ? 'vertical' : undefined}
           aria-label={ariaLabel as string | undefined}
           {...getAriaProps(currentSingle)}
+          id={controlId}
           {...rest}
         />
         {tooltipMode !== 'hidden' && (
@@ -742,6 +758,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
             (ariaLabel as [string, string] | undefined)?.[0] ?? 'Minimum value'
           }
           {...getAriaProps(currentRange[0])}
+          id={controlId}
           {...rest}
           {...(nameLow !== undefined ? { name: nameLow } : {})}
         />
@@ -863,7 +880,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/TextArea.tsx b/bulma-ui/src/form/TextArea.tsx
index a53d02acb..abe3e902d 100644
--- a/bulma-ui/src/form/TextArea.tsx
+++ b/bulma-ui/src/form/TextArea.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from './Field';
 import { Control, ControlBaseProps } from './Control';
 import { TextAreaBase, TextAreaBaseProps } from './TextAreaBase';
 import { useInsideField, useInsideControl } from './FormContext';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the TextArea component.
@@ -13,11 +14,11 @@ import { useInsideField, useInsideControl } from './FormContext';
  * Control-level (loading) props.
  */
 export interface TextAreaProps extends TextAreaBaseProps {
-  /** Field label. */
+  /** Field label. Automatically associated with the textarea via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: FieldProps['labelSize'];
-  /** Props for the label element. */
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
   labelProps?: FieldProps['labelProps'];
   /** Horizontal field layout. */
   horizontal?: boolean;
@@ -76,11 +77,17 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: textAreaProps.id,
+      labelProps,
+      rendersLabel: !insideField,
+    });
     const helpClass = usePrefixedClassNames('help', {
       [`is-${messageColor}`]: !!messageColor,
     });
 
-    let content = <TextAreaBase ref={ref} {...textAreaProps} />;
+    let content = <TextAreaBase ref={ref} id={controlId} {...textAreaProps} />;
 
     if (!insideControl) {
       content = (
@@ -101,7 +108,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/TimeInput.tsx b/bulma-ui/src/form/TimeInput.tsx
index 775e7a0e7..b818f211a 100644
--- a/bulma-ui/src/form/TimeInput.tsx
+++ b/bulma-ui/src/form/TimeInput.tsx
@@ -4,6 +4,7 @@ import { Field, FieldProps } from './Field';
 import { Control, ControlBaseProps } from './Control';
 import { TimeInputBase, TimeInputBaseProps } from './TimeInputBase';
 import { useInsideField, useInsideControl } from './FormContext';
+import { useAutoLabelId } from './useAutoLabelId';
 
 /**
  * Props for the TimeInput convenience wrapper. Extends `TimeInputBaseProps`
@@ -15,11 +16,11 @@ import { useInsideField, useInsideControl } from './FormContext';
  * @extraProp {React.Ref<HTMLInputElement>} [ref] - Forwarded to the underlying `<input>`.
  */
 export interface TimeInputProps extends TimeInputBaseProps {
-  /** Field label. */
+  /** Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. */
   label?: React.ReactNode;
   /** Size for the label. */
   labelSize?: FieldProps['labelSize'];
-  /** Props for the label element. */
+  /** Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then). */
   labelProps?: FieldProps['labelProps'];
   /** Render the field with horizontal layout. */
   horizontal?: boolean;
@@ -94,6 +95,13 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
   ) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+      label,
+      id: baseProps.id,
+      labelProps,
+      // Inline mode renders a bare panel with no input to label.
+      rendersLabel: !insideField && !baseProps.inline,
+    });
     const helpClass = usePrefixedClassNames('help', {
       [`is-${messageColor}`]: !!messageColor,
     });
@@ -103,6 +111,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
     let content: React.ReactNode = (
       <TimeInputBase
         ref={ref}
+        id={controlId}
         {...baseProps}
         triggerIcon={baseProps.triggerIcon ?? !isLoading}
       />
@@ -138,7 +147,7 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
         <Field
           label={label}
           labelSize={labelSize}
-          labelProps={labelProps}
+          labelProps={fieldLabelProps}
           horizontal={horizontal}
           className={fieldClassName}
         >
diff --git a/bulma-ui/src/form/__tests__/DateInput.test.tsx b/bulma-ui/src/form/__tests__/DateInput.test.tsx
index 29aa1a55d..a5759207b 100644
--- a/bulma-ui/src/form/__tests__/DateInput.test.tsx
+++ b/bulma-ui/src/form/__tests__/DateInput.test.tsx
@@ -1030,3 +1030,40 @@ describe('DateInputBase remaining branches', () => {
     expect(container.querySelector('input[type="hidden"]')).toBeNull();
   });
 });
+
+describe('DateInput label association (#368)', () => {
+  it('associates the label with the input via htmlFor/id', () => {
+    const { getByRole, container } = render(<DateInput label="Date" />);
+    const input = getByRole('combobox');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('respects a user id and still derives the popover id from it', () => {
+    const { getByRole, container } = render(
+      <DateInput label="Date" id="when" />
+    );
+    const input = getByRole('combobox');
+    expect(input).toHaveAttribute('id', 'when');
+    expect(input).toHaveAttribute('aria-controls', 'when-popover');
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      'when'
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { getByRole } = render(<DateInput />);
+    expect(getByRole('combobox')).not.toHaveAttribute('id');
+  });
+
+  it('renders the label unwired in inline mode', () => {
+    const { container } = render(<DateInput label="Date" inline />);
+    const label = container.querySelector('label.label');
+    expect(label).toHaveTextContent('Date');
+    expect(label).not.toHaveAttribute('for');
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/DateTimeInput.test.tsx b/bulma-ui/src/form/__tests__/DateTimeInput.test.tsx
index 008730c6f..1fdb35d16 100644
--- a/bulma-ui/src/form/__tests__/DateTimeInput.test.tsx
+++ b/bulma-ui/src/form/__tests__/DateTimeInput.test.tsx
@@ -1142,3 +1142,29 @@ describe('DateTimeInput small viewport', () => {
     expect(option.style.height).toBe('40px');
   });
 });
+
+describe('DateTimeInput label association (#368)', () => {
+  it('associates the label with the input via htmlFor/id', () => {
+    const { getByRole, container } = render(
+      <DateTimeInput label="Appointment" />
+    );
+    const input = getByRole('combobox');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { getByRole } = render(<DateTimeInput />);
+    expect(getByRole('combobox')).not.toHaveAttribute('id');
+  });
+
+  it('renders the label unwired in inline mode', () => {
+    const { container } = render(<DateTimeInput label="Appointment" inline />);
+    const label = container.querySelector('label.label');
+    expect(label).toHaveTextContent('Appointment');
+    expect(label).not.toHaveAttribute('for');
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/File.test.tsx b/bulma-ui/src/form/__tests__/File.test.tsx
index 92604559a..8cb2119d4 100644
--- a/bulma-ui/src/form/__tests__/File.test.tsx
+++ b/bulma-ui/src/form/__tests__/File.test.tsx
@@ -174,3 +174,28 @@ describe('File', () => {
     });
   });
 });
+
+describe('File label association (#368)', () => {
+  it('associates the Field label with the file input', () => {
+    const { container } = render(<File label="Avatar" />);
+    const input = screen.getByLabelText('Avatar');
+    expect(input).toHaveAttribute('type', 'file');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('resolves the Field label and the CTA label to the same input', () => {
+    render(<File label="Avatar" />);
+    expect(screen.getByLabelText('Avatar')).toBe(
+      screen.getByLabelText(/choose a file/i)
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { container } = render(<File />);
+    expect(container.querySelector('input')).not.toHaveAttribute('id');
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/Input.test.tsx b/bulma-ui/src/form/__tests__/Input.test.tsx
index 3c0fa367f..9511ff026 100644
--- a/bulma-ui/src/form/__tests__/Input.test.tsx
+++ b/bulma-ui/src/form/__tests__/Input.test.tsx
@@ -2,6 +2,7 @@ import React, { createRef } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Input } from '../Input';
+import { Field } from '../Field';
 import { ConfigProvider } from '../../helpers/Config';
 
 describe('Input', () => {
@@ -184,3 +185,72 @@ describe('Input', () => {
     });
   });
 });
+
+describe('Input label association (#368)', () => {
+  it('associates the label with the input via htmlFor/id', () => {
+    const { container } = render(<Input label="Username" />);
+    const input = screen.getByLabelText('Username');
+    expect(input.tagName).toBe('INPUT');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('uses a user-supplied id as the association target', () => {
+    const { container } = render(<Input label="Username" id="my-input" />);
+    const input = screen.getByLabelText('Username');
+    expect(input).toHaveAttribute('id', 'my-input');
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      'my-input'
+    );
+  });
+
+  it('lets an explicit labelProps.htmlFor override the association', () => {
+    const { container } = render(
+      <Input label="Username" id="my-input" labelProps={{ htmlFor: 'other' }} />
+    );
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      'other'
+    );
+    expect(container.querySelector('input')).toHaveAttribute('id', 'my-input');
+  });
+
+  it('injects no id when labelProps.htmlFor is set without an id', () => {
+    const { container } = render(
+      <Input label="Username" labelProps={{ htmlFor: 'elsewhere' }} />
+    );
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      'elsewhere'
+    );
+    expect(container.querySelector('input')).not.toHaveAttribute('id');
+  });
+
+  it('injects no id without a label', () => {
+    const { container } = render(<Input />);
+    expect(container.querySelector('input')).not.toHaveAttribute('id');
+  });
+
+  it('injects no id inside an outer Field, which drops the label', () => {
+    const { container } = render(
+      <Field label="Outer">
+        <Input label="Dropped" />
+      </Field>
+    );
+    expect(container.querySelectorAll('label').length).toBe(1);
+    expect(container.querySelector('input')).not.toHaveAttribute('id');
+  });
+
+  it('associates in horizontal layout', () => {
+    const { container } = render(<Input label="Username" horizontal />);
+    const input = screen.getByLabelText('Username');
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/Numberinput.test.tsx b/bulma-ui/src/form/__tests__/Numberinput.test.tsx
index 8769466e1..88e394b1f 100644
--- a/bulma-ui/src/form/__tests__/Numberinput.test.tsx
+++ b/bulma-ui/src/form/__tests__/Numberinput.test.tsx
@@ -942,3 +942,55 @@ describe('Numberinput', () => {
     });
   });
 });
+
+describe('Numberinput label association (#368)', () => {
+  it('associates the label with the number input (plusminus)', () => {
+    const { container } = render(<Numberinput label="Quantity" />);
+    const input = screen.getByLabelText('Quantity');
+    expect(input).toHaveAttribute('type', 'number');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('associates the label in the stepper variant', () => {
+    const { container } = render(
+      <Numberinput label="Quantity" variant="stepper" />
+    );
+    const input = screen.getByLabelText('Quantity');
+    expect(input).toHaveAttribute('type', 'number');
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('renders no label and injects no id in bare mode', () => {
+    const { container } = render(<Numberinput bare label="Quantity" />);
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+    expect(container.querySelector('input[type="number"]')).not.toHaveAttribute(
+      'id'
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { container } = render(<Numberinput />);
+    expect(container.querySelector('input[type="number"]')).not.toHaveAttribute(
+      'id'
+    );
+  });
+
+  it('injects no id inside an outer Field, which drops the label', () => {
+    const { container } = render(
+      <Field label="Outer">
+        <Numberinput label="Dropped" />
+      </Field>
+    );
+    expect(container.querySelectorAll('label').length).toBe(1);
+    expect(container.querySelector('input[type="number"]')).not.toHaveAttribute(
+      'id'
+    );
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/Select.test.tsx b/bulma-ui/src/form/__tests__/Select.test.tsx
index 592bed272..67c554034 100644
--- a/bulma-ui/src/form/__tests__/Select.test.tsx
+++ b/bulma-ui/src/form/__tests__/Select.test.tsx
@@ -200,3 +200,29 @@ describe('Select', () => {
     });
   });
 });
+
+describe('Select label association (#368)', () => {
+  it('associates the label with the select via htmlFor/id', () => {
+    const { container } = render(
+      <Select label="Country">
+        <option value="us">United States</option>
+      </Select>
+    );
+    const select = screen.getByLabelText('Country');
+    expect(select.tagName).toBe('SELECT');
+    expect(select.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      select.id
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { container } = render(
+      <Select>
+        <option value="us">United States</option>
+      </Select>
+    );
+    expect(container.querySelector('select')).not.toHaveAttribute('id');
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/Slider.test.tsx b/bulma-ui/src/form/__tests__/Slider.test.tsx
index 802c27f00..a5ebea19b 100644
--- a/bulma-ui/src/form/__tests__/Slider.test.tsx
+++ b/bulma-ui/src/form/__tests__/Slider.test.tsx
@@ -1263,3 +1263,33 @@ describe('Slider', () => {
     });
   });
 });
+
+describe('Slider label association (#368)', () => {
+  it('associates the label with the slider input', () => {
+    const { container } = render(<Slider label="Volume" />);
+    const input = screen.getByLabelText('Volume');
+    expect(input).toHaveAttribute('type', 'range');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('targets the low thumb in range mode', () => {
+    const { container } = render(<Slider range label="Price" />);
+    const low = container.querySelector('.slider-input-low') as HTMLElement;
+    const high = container.querySelector('.slider-input-high') as HTMLElement;
+    expect(low.id).toBeTruthy();
+    expect(high).not.toHaveAttribute('id');
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      low.id
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { container } = render(<Slider />);
+    expect(container.querySelector('input')).not.toHaveAttribute('id');
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/TextArea.test.tsx b/bulma-ui/src/form/__tests__/TextArea.test.tsx
index 2b36bf53b..ee8f2d3a4 100644
--- a/bulma-ui/src/form/__tests__/TextArea.test.tsx
+++ b/bulma-ui/src/form/__tests__/TextArea.test.tsx
@@ -200,3 +200,21 @@ describe('TextArea', () => {
     });
   });
 });
+
+describe('TextArea label association (#368)', () => {
+  it('associates the label with the textarea via htmlFor/id', () => {
+    const { container } = render(<TextArea label="Bio" />);
+    const textarea = screen.getByLabelText('Bio');
+    expect(textarea.tagName).toBe('TEXTAREA');
+    expect(textarea.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      textarea.id
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { container } = render(<TextArea />);
+    expect(container.querySelector('textarea')).not.toHaveAttribute('id');
+  });
+});
diff --git a/bulma-ui/src/form/__tests__/TimeInput.test.tsx b/bulma-ui/src/form/__tests__/TimeInput.test.tsx
index 52aca6176..cc66f7c8f 100644
--- a/bulma-ui/src/form/__tests__/TimeInput.test.tsx
+++ b/bulma-ui/src/form/__tests__/TimeInput.test.tsx
@@ -1450,3 +1450,27 @@ describe('TimeInputBase remaining branches', () => {
     expect(container.querySelector('input[type="hidden"]')).toBeNull();
   });
 });
+
+describe('TimeInput label association (#368)', () => {
+  it('associates the label with the input via htmlFor/id', () => {
+    const { getByRole, container } = render(<TimeInput label="Departure" />);
+    const input = getByRole('combobox');
+    expect(input.id).toBeTruthy();
+    expect(container.querySelector('label.label')).toHaveAttribute(
+      'for',
+      input.id
+    );
+  });
+
+  it('injects no id without a label', () => {
+    const { getByRole } = render(<TimeInput />);
+    expect(getByRole('combobox')).not.toHaveAttribute('id');
+  });
+
+  it('renders the label unwired in inline mode', () => {
+    const { container } = render(<TimeInput label="Departure" inline />);
+    const label = container.querySelector('label.label');
+    expect(label).toHaveTextContent('Departure');
+    expect(label).not.toHaveAttribute('for');
+  });
+});
diff --git a/bulma-ui/src/form/fieldProps.ts b/bulma-ui/src/form/fieldProps.ts
index ef9236385..379b40be7 100644
--- a/bulma-ui/src/form/fieldProps.ts
+++ b/bulma-ui/src/form/fieldProps.ts
@@ -5,6 +5,11 @@ import React from 'react';
  * When these props are provided and the component is not already inside a Field,
  * it will automatically render a Field around itself.
  */
+// NOTE: the label/labelProps TSDoc here must stay neutral about htmlFor
+// association — this interface is also inherited by group/composite inputs
+// (Autocomplete, Checkboxes, Radios, Rate, Taginput) that do NOT auto-wire it.
+// Single-control components that do (via useAutoLabelId, #368) shadow-redeclare
+// these members with the stronger claim.
 export interface FormFieldProps {
   /** Field label, rendered above the widget. */
   label?: React.ReactNode;
diff --git a/bulma-ui/src/form/useAutoLabelId.ts b/bulma-ui/src/form/useAutoLabelId.ts
new file mode 100644
index 000000000..7615426d8
--- /dev/null
+++ b/bulma-ui/src/form/useAutoLabelId.ts
@@ -0,0 +1,45 @@
+import React, { useId } from 'react';
+import type { FieldProps } from './Field';
+
+interface UseAutoLabelIdOptions {
+  /** The convenience `label` prop as passed by the caller. */
+  label: React.ReactNode;
+  /** User-supplied id for the control, if any. */
+  id?: string;
+  /** User-supplied labelProps, if any. */
+  labelProps?: FieldProps['labelProps'];
+  /**
+   * True when this render actually outputs the label wired to a control —
+   * false inside an outer Field (label is dropped), in variants that render
+   * no Field, and in modes with no labellable control (e.g. inline pickers).
+   */
+  rendersLabel: boolean;
+}
+
+/**
+ * Associates the convenience `label` prop with its control (#368): generates
+ * an id for the control and returns labelProps carrying a matching `htmlFor`.
+ * A user-supplied `id` is used as the target instead of the generated one, and
+ * an explicit `labelProps.htmlFor` disables generation entirely — the user has
+ * taken over the association. Internal; not part of the public API.
+ */
+export function useAutoLabelId({
+  label,
+  id,
+  labelProps,
+  rendersLabel,
+}: UseAutoLabelIdOptions): {
+  controlId: string | undefined;
+  fieldLabelProps: FieldProps['labelProps'] | undefined;
+} {
+  // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
+  const generatedId = useId();
+  // Truthiness mirrors Field's own `if (label)` render gate.
+  const active = !!label && rendersLabel;
+  const controlId =
+    id ?? (active && !labelProps?.htmlFor ? generatedId : undefined);
+  const fieldLabelProps = active
+    ? { htmlFor: controlId, ...labelProps }
+    : labelProps;
+  return { controlId, fieldLabelProps };
+}
diff --git a/bulma-ui/src/skill-examples/Form.stories.tsx b/bulma-ui/src/skill-examples/Form.stories.tsx
index 2f646364d..e06b51412 100644
--- a/bulma-ui/src/skill-examples/Form.stories.tsx
+++ b/bulma-ui/src/skill-examples/Form.stories.tsx
@@ -88,8 +88,6 @@ export const Signup: Story = {
             message={show('name')}
             messageColor="danger"
             iconLeftName="user"
-            id="signup-name"
-            labelProps={{ htmlFor: 'signup-name' }}
           />
           <Input
             label="Email"
@@ -100,8 +98,6 @@ export const Signup: Story = {
             message={show('email')}
             messageColor="danger"
             iconLeftName="envelope"
-            id="signup-email"
-            labelProps={{ htmlFor: 'signup-email' }}
           />
           <Select
             label="Country"
@@ -110,8 +106,6 @@ export const Signup: Story = {
             color={show('country') ? 'danger' : undefined}
             message={show('country')}
             messageColor="danger"
-            id="signup-country"
-            labelProps={{ htmlFor: 'signup-country' }}
           >
             <option value="">Select…</option>
             <option value="us">United States</option>
diff --git a/docs/blog/2026-08-04-forms-without-a-form-library.md b/docs/blog/2026-08-04-forms-without-a-form-library.md
index 04838668b..d856258a0 100644
--- a/docs/blog/2026-08-04-forms-without-a-form-library.md
+++ b/docs/blog/2026-08-04-forms-without-a-form-library.md
@@ -46,7 +46,7 @@ function AutoWrapDemo() {
 
 To be precise about the mechanics: the wrapping isn't triggered by those props. A convenience input always wraps itself unless it detects it's already inside a `Field` or `Control`, and `label` and friends just forward into the generated wrapper. The field-level props are shared across inputs (`label`, `labelSize`, `labelProps`, `horizontal`, `message`, `messageColor`, and `fieldClassName`), with `messageColor` tinting the help text.
 
-One accessibility note: `label` renders the `<label>` element but won't invent an `id` to point it at, so pass `id` on the input plus `labelProps={{ htmlFor: sameId }}`, the way the demos on this page do.
+One accessibility note: `label` now wires the `<label>` to the input on its own (a generated `id` plus `htmlFor`, or your own `id` if you pass one). The demos on this page wire it explicitly, which still works and is the way to go when you want a stable `id`; on library versions before this shipped, it was required.
 
 ## Skip-If-Wrapped
 
diff --git a/docs/docs/api/form/datetime/dateinput.md b/docs/docs/api/form/datetime/dateinput.md
index 361cf7692..d1db4604d 100644
--- a/docs/docs/api/form/datetime/dateinput.md
+++ b/docs/docs/api/form/datetime/dateinput.md
@@ -827,66 +827,66 @@ Use `inline` instead of the popover when you have vertical room to spare — boo
 
 <!-- bestax:generated props -->
 
-| Prop                | Type                                                                             | Default          | Description                                                                                                                                 |
-| ------------------- | -------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`             | `React.ReactNode`                                                                | —                | Field label (component auto-wraps in a `Field` if not already inside).                                                                      |
-| `labelSize`         | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                               | —                | Size for the label.                                                                                                                         |
-| `labelProps`        | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`      | —                | Props for the label element.                                                                                                                |
-| `horizontal`        | `boolean`                                                                        | `false`          | Render the field with horizontal layout.                                                                                                    |
-| `iconLeft`          | `IconProps`                                                                      | —                | Icon props for the left icon.                                                                                                               |
-| `iconRight`         | `IconProps`                                                                      | —                | Icon props for the right icon.                                                                                                              |
-| `iconRightName`     | `string`                                                                         | —                | Shortcut for the right icon name.                                                                                                           |
-| `iconLeftSize`      | `'small'` \| `'medium'` \| `'large'`                                             | —                | Shortcut for left icon size.                                                                                                                |
-| `iconRightSize`     | `'small'` \| `'medium'` \| `'large'`                                             | —                | Shortcut for right icon size.                                                                                                               |
-| `hasIconsLeft`      | `boolean`                                                                        | `false`          | Force the left icon container.                                                                                                              |
-| `hasIconsRight`     | `boolean`                                                                        | `false`          | Force the right icon container.                                                                                                             |
-| `isLoading`         | `boolean`                                                                        | `false`          | Show a loading indicator on the control.                                                                                                    |
-| `isExpanded`        | `boolean`                                                                        | `false`          | Expand the control to fill its container.                                                                                                   |
-| `controlSize`       | `'small'` \| `'medium'` \| `'large'`                                             | —                | Size of the wrapping Control.                                                                                                               |
-| `message`           | `React.ReactNode`                                                                | —                | Help/validation text below the input.                                                                                                       |
-| `messageColor`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                | Color modifier for the help message.                                                                                                        |
-| `fieldClassName`    | `string`                                                                         | —                | Additional CSS classes for the Field wrapper.                                                                                               |
-| `controlClassName`  | `string`                                                                         | —                | Additional CSS classes for the Control wrapper.                                                                                             |
-| `value`             | `Date` \| `null`                                                                 | —                | Controlled selected date.                                                                                                                   |
-| `defaultValue`      | `Date` \| `null`                                                                 | —                | Initial date for uncontrolled usage.                                                                                                        |
-| `onChange`          | `(d: Date \| null) => void`                                                      | —                | Fired when the value changes.                                                                                                               |
-| `onOpen`            | `() => void`                                                                     | —                | Fired when the popover opens.                                                                                                               |
-| `onClose`           | `() => void`                                                                     | —                | Fired when the popover closes.                                                                                                              |
-| `min`               | `Date`                                                                           | —                | Earliest selectable date.                                                                                                                   |
-| `max`               | `Date`                                                                           | —                | Latest selectable date.                                                                                                                     |
-| `disabled`          | `boolean`                                                                        | `false`          | Disable the input.                                                                                                                          |
-| `readOnly`          | `boolean`                                                                        | `false`          | Make the input read-only.                                                                                                                   |
-| `placeholder`       | `string`                                                                         | —                | Placeholder text for the input.                                                                                                             |
-| `format`            | `Intl.DateTimeFormatOptions` \| `string`                                         | `'YYYY-MM-DD'`   | Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD'`.                                                               |
-| `parse`             | `(s: string) => Date \| null`                                                    | —                | Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).                                                                          |
-| `locale`            | `string`                                                                         | —                | BCP-47 locale tag for day/month names and Intl formatting.                                                                                  |
-| `inline`            | `boolean`                                                                        | `false`          | Render the calendar inline (no popover).                                                                                                    |
-| `mobileNative`      | `boolean` \| `'auto'`                                                            | `'auto'`         | Use `<input type="date">` on coarse-pointer + small-viewport devices.                                                                       |
-| `editable`          | `boolean`                                                                        | `true`           | Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). `false` makes the field picker-only. |
-| `popover`           | `boolean`                                                                        | `true`           | Whether the calendar popover exists. `false` makes the field input-only (segmented typing, no popover).                                     |
-| `openOnFocus`       | `boolean`                                                                        | `true`           | Open the popover when the input is focused.                                                                                                 |
-| `closeOnSelect`     | `boolean`                                                                        | `true`           | Close the popover after a date is selected.                                                                                                 |
-| `position`          | `'bottom-left'` \| `'bottom-right'` \| `'top-left'` \| `'top-right'` \| `'auto'` | `'bottom-left'`  | Popover anchor position relative to the input.                                                                                              |
-| `appendToBody`      | `boolean`                                                                        | `false`          | Render the popover into `document.body` via portal.                                                                                         |
-| `color`             | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                | Bulma color modifier.                                                                                                                       |
-| `size`              | `'small'` \| `'medium'` \| `'large'`                                             | —                | Size variant.                                                                                                                               |
-| `isRounded`         | `boolean`                                                                        | `false`          | Render the input with rounded corners.                                                                                                      |
-| `shouldDisableDate` | `(d: Date) => boolean`                                                           | —                | Predicate to disable specific dates (e.g. weekends). Blocked dates are also rejected during manual typing.                                  |
-| `unselectableDates` | `Date[]`                                                                         | —                | Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day and also rejected during manual typing.       |
-| `firstDayOfWeek`    | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6`                                    | `0`              | Day the week starts on (0 = Sunday).                                                                                                        |
-| `dayNames`          | `string[]`                                                                       | —                | Override the 7 day-name labels (in calendar order, post-rotation).                                                                          |
-| `monthNames`        | `string[]`                                                                       | —                | Override the 12 month-name labels.                                                                                                          |
-| `nearbyMonthDays`   | `boolean`                                                                        | `true`           | Show dimmed dates from adjacent months in the grid.                                                                                         |
-| `iconLeftName`      | `string`                                                                         | `'calendar'`     | Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide.                                                 |
-| `triggerIcon`       | `boolean`                                                                        | `true`           | Show a clickable launcher button on the right that toggles the popover. Default `true`.                                                     |
-| `triggerIconName`   | `string`                                                                         | `'chevron-down'` | Glyph for the right launcher button.                                                                                                        |
-| `labels`            | `PickerLabels`                                                                   | —                | Optional translatable string overrides (ARIA labels, button text).                                                                          |
-| `name`              | `string`                                                                         | —                | Form field name. Forwarded to a hidden ISO-formatted input.                                                                                 |
-| `form`              | `string`                                                                         | —                | Form id the input belongs to.                                                                                                               |
-| `required`          | `boolean`                                                                        | `false`          | Marks the input as required.                                                                                                                |
-| `className`         | `string`                                                                         | —                | Additional CSS classes for the input.                                                                                                       |
-| `ref`               | `React.Ref<HTMLInputElement>`                                                    | —                | Forwarded to the underlying `<input>`.                                                                                                      |
-| `...`               | All standard `<input>` attributes and Bulma helper props                         | —                | See [Helper Props](../../helpers/usebulmaclasses.md)                                                                                        |
+| Prop                | Type                                                                             | Default          | Description                                                                                                                                                                                                                                                                         |
+| ------------------- | -------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`             | `React.ReactNode`                                                                | —                | Field label (component auto-wraps in a `Field` if not already inside). Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. |
+| `labelSize`         | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                               | —                | Size for the label.                                                                                                                                                                                                                                                                 |
+| `labelProps`        | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`      | —                | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                                                                                                              |
+| `horizontal`        | `boolean`                                                                        | `false`          | Render the field with horizontal layout.                                                                                                                                                                                                                                            |
+| `iconLeft`          | `IconProps`                                                                      | —                | Icon props for the left icon.                                                                                                                                                                                                                                                       |
+| `iconRight`         | `IconProps`                                                                      | —                | Icon props for the right icon.                                                                                                                                                                                                                                                      |
+| `iconRightName`     | `string`                                                                         | —                | Shortcut for the right icon name.                                                                                                                                                                                                                                                   |
+| `iconLeftSize`      | `'small'` \| `'medium'` \| `'large'`                                             | —                | Shortcut for left icon size.                                                                                                                                                                                                                                                        |
+| `iconRightSize`     | `'small'` \| `'medium'` \| `'large'`                                             | —                | Shortcut for right icon size.                                                                                                                                                                                                                                                       |
+| `hasIconsLeft`      | `boolean`                                                                        | `false`          | Force the left icon container.                                                                                                                                                                                                                                                      |
+| `hasIconsRight`     | `boolean`                                                                        | `false`          | Force the right icon container.                                                                                                                                                                                                                                                     |
+| `isLoading`         | `boolean`                                                                        | `false`          | Show a loading indicator on the control.                                                                                                                                                                                                                                            |
+| `isExpanded`        | `boolean`                                                                        | `false`          | Expand the control to fill its container.                                                                                                                                                                                                                                           |
+| `controlSize`       | `'small'` \| `'medium'` \| `'large'`                                             | —                | Size of the wrapping Control.                                                                                                                                                                                                                                                       |
+| `message`           | `React.ReactNode`                                                                | —                | Help/validation text below the input.                                                                                                                                                                                                                                               |
+| `messageColor`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                | Color modifier for the help message.                                                                                                                                                                                                                                                |
+| `fieldClassName`    | `string`                                                                         | —                | Additional CSS classes for the Field wrapper.                                                                                                                                                                                                                                       |
+| `controlClassName`  | `string`                                                                         | —                | Additional CSS classes for the Control wrapper.                                                                                                                                                                                                                                     |
+| `value`             | `Date` \| `null`                                                                 | —                | Controlled selected date.                                                                                                                                                                                                                                                           |
+| `defaultValue`      | `Date` \| `null`                                                                 | —                | Initial date for uncontrolled usage.                                                                                                                                                                                                                                                |
+| `onChange`          | `(d: Date \| null) => void`                                                      | —                | Fired when the value changes.                                                                                                                                                                                                                                                       |
+| `onOpen`            | `() => void`                                                                     | —                | Fired when the popover opens.                                                                                                                                                                                                                                                       |
+| `onClose`           | `() => void`                                                                     | —                | Fired when the popover closes.                                                                                                                                                                                                                                                      |
+| `min`               | `Date`                                                                           | —                | Earliest selectable date.                                                                                                                                                                                                                                                           |
+| `max`               | `Date`                                                                           | —                | Latest selectable date.                                                                                                                                                                                                                                                             |
+| `disabled`          | `boolean`                                                                        | `false`          | Disable the input.                                                                                                                                                                                                                                                                  |
+| `readOnly`          | `boolean`                                                                        | `false`          | Make the input read-only.                                                                                                                                                                                                                                                           |
+| `placeholder`       | `string`                                                                         | —                | Placeholder text for the input.                                                                                                                                                                                                                                                     |
+| `format`            | `Intl.DateTimeFormatOptions` \| `string`                                         | `'YYYY-MM-DD'`   | Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD'`.                                                                                                                                                                                                       |
+| `parse`             | `(s: string) => Date \| null`                                                    | —                | Custom parser (use when `format` is `Intl.DateTimeFormatOptions`).                                                                                                                                                                                                                  |
+| `locale`            | `string`                                                                         | —                | BCP-47 locale tag for day/month names and Intl formatting.                                                                                                                                                                                                                          |
+| `inline`            | `boolean`                                                                        | `false`          | Render the calendar inline (no popover).                                                                                                                                                                                                                                            |
+| `mobileNative`      | `boolean` \| `'auto'`                                                            | `'auto'`         | Use `<input type="date">` on coarse-pointer + small-viewport devices.                                                                                                                                                                                                               |
+| `editable`          | `boolean`                                                                        | `true`           | Allow segmented keyboard typing in the input (type the date directly, auto-advancing across segments). `false` makes the field picker-only.                                                                                                                                         |
+| `popover`           | `boolean`                                                                        | `true`           | Whether the calendar popover exists. `false` makes the field input-only (segmented typing, no popover).                                                                                                                                                                             |
+| `openOnFocus`       | `boolean`                                                                        | `true`           | Open the popover when the input is focused.                                                                                                                                                                                                                                         |
+| `closeOnSelect`     | `boolean`                                                                        | `true`           | Close the popover after a date is selected.                                                                                                                                                                                                                                         |
+| `position`          | `'bottom-left'` \| `'bottom-right'` \| `'top-left'` \| `'top-right'` \| `'auto'` | `'bottom-left'`  | Popover anchor position relative to the input.                                                                                                                                                                                                                                      |
+| `appendToBody`      | `boolean`                                                                        | `false`          | Render the popover into `document.body` via portal.                                                                                                                                                                                                                                 |
+| `color`             | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                | Bulma color modifier.                                                                                                                                                                                                                                                               |
+| `size`              | `'small'` \| `'medium'` \| `'large'`                                             | —                | Size variant.                                                                                                                                                                                                                                                                       |
+| `isRounded`         | `boolean`                                                                        | `false`          | Render the input with rounded corners.                                                                                                                                                                                                                                              |
+| `shouldDisableDate` | `(d: Date) => boolean`                                                           | —                | Predicate to disable specific dates (e.g. weekends). Blocked dates are also rejected during manual typing.                                                                                                                                                                          |
+| `unselectableDates` | `Date[]`                                                                         | —                | Convenience array of disabled dates; merged with `shouldDisableDate`. Matched by calendar day and also rejected during manual typing.                                                                                                                                               |
+| `firstDayOfWeek`    | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6`                                    | `0`              | Day the week starts on (0 = Sunday).                                                                                                                                                                                                                                                |
+| `dayNames`          | `string[]`                                                                       | —                | Override the 7 day-name labels (in calendar order, post-rotation).                                                                                                                                                                                                                  |
+| `monthNames`        | `string[]`                                                                       | —                | Override the 12 month-name labels.                                                                                                                                                                                                                                                  |
+| `nearbyMonthDays`   | `boolean`                                                                        | `true`           | Show dimmed dates from adjacent months in the grid.                                                                                                                                                                                                                                 |
+| `iconLeftName`      | `string`                                                                         | `'calendar'`     | Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide.                                                                                                                                                                                         |
+| `triggerIcon`       | `boolean`                                                                        | `true`           | Show a clickable launcher button on the right that toggles the popover. Default `true`.                                                                                                                                                                                             |
+| `triggerIconName`   | `string`                                                                         | `'chevron-down'` | Glyph for the right launcher button.                                                                                                                                                                                                                                                |
+| `labels`            | `PickerLabels`                                                                   | —                | Optional translatable string overrides (ARIA labels, button text).                                                                                                                                                                                                                  |
+| `name`              | `string`                                                                         | —                | Form field name. Forwarded to a hidden ISO-formatted input.                                                                                                                                                                                                                         |
+| `form`              | `string`                                                                         | —                | Form id the input belongs to.                                                                                                                                                                                                                                                       |
+| `required`          | `boolean`                                                                        | `false`          | Marks the input as required.                                                                                                                                                                                                                                                        |
+| `className`         | `string`                                                                         | —                | Additional CSS classes for the input.                                                                                                                                                                                                                                               |
+| `ref`               | `React.Ref<HTMLInputElement>`                                                    | —                | Forwarded to the underlying `<input>`.                                                                                                                                                                                                                                              |
+| `...`               | All standard `<input>` attributes and Bulma helper props                         | —                | See [Helper Props](../../helpers/usebulmaclasses.md)                                                                                                                                                                                                                                |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/datetime/datetimeinput.md b/docs/docs/api/form/datetime/datetimeinput.md
index 223b8c69d..480db7715 100644
--- a/docs/docs/api/form/datetime/datetimeinput.md
+++ b/docs/docs/api/form/datetime/datetimeinput.md
@@ -831,74 +831,74 @@ The DateTimeInput prop set is the union of [DateInput](./dateinput.md) and [Time
 
 <!-- bestax:generated props -->
 
-| Prop                | Type                                                                             | Default              | Description                                                                                                                                                   |
-| ------------------- | -------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`             | `React.ReactNode`                                                                | —                    | Field label.                                                                                                                                                  |
-| `labelSize`         | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                               | —                    | Size for the label.                                                                                                                                           |
-| `labelProps`        | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`      | —                    | Props for the label element.                                                                                                                                  |
-| `horizontal`        | `boolean`                                                                        | `false`              | Render the field with horizontal layout.                                                                                                                      |
-| `iconLeft`          | `IconProps`                                                                      | —                    | Icon props for the left icon.                                                                                                                                 |
-| `iconRight`         | `IconProps`                                                                      | —                    | Icon props for the right icon.                                                                                                                                |
-| `iconRightName`     | `string`                                                                         | —                    | Shortcut for the right icon name.                                                                                                                             |
-| `iconLeftSize`      | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Shortcut for left icon size.                                                                                                                                  |
-| `iconRightSize`     | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Shortcut for right icon size.                                                                                                                                 |
-| `hasIconsLeft`      | `boolean`                                                                        | `false`              | Force the left icon container.                                                                                                                                |
-| `hasIconsRight`     | `boolean`                                                                        | `false`              | Force the right icon container.                                                                                                                               |
-| `isLoading`         | `boolean`                                                                        | `false`              | Show a loading indicator on the control.                                                                                                                      |
-| `isExpanded`        | `boolean`                                                                        | `false`              | Expand the control to fill its container.                                                                                                                     |
-| `controlSize`       | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Size of the wrapping Control.                                                                                                                                 |
-| `message`           | `React.ReactNode`                                                                | —                    | Help/validation text below the input.                                                                                                                         |
-| `messageColor`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                    | Message color.                                                                                                                                                |
-| `fieldClassName`    | `string`                                                                         | —                    | Additional CSS classes for the Field wrapper.                                                                                                                 |
-| `controlClassName`  | `string`                                                                         | —                    | Additional CSS classes for the Control wrapper.                                                                                                               |
-| `value`             | `Date` \| `null`                                                                 | —                    | Controlled selected date-time.                                                                                                                                |
-| `defaultValue`      | `Date` \| `null`                                                                 | —                    | Initial value for uncontrolled usage.                                                                                                                         |
-| `onChange`          | `(d: Date \| null) => void`                                                      | —                    | Fired when either the date or time portion changes.                                                                                                           |
-| `onOpen`            | `() => void`                                                                     | —                    | Fired when the popover opens.                                                                                                                                 |
-| `onClose`           | `() => void`                                                                     | —                    | Fired when the popover closes.                                                                                                                                |
-| `min`               | `Date`                                                                           | —                    | Lower bound for the combined date-time.                                                                                                                       |
-| `max`               | `Date`                                                                           | —                    | Upper bound for the combined date-time.                                                                                                                       |
-| `disabled`          | `boolean`                                                                        | `false`              | Disable the input.                                                                                                                                            |
-| `readOnly`          | `boolean`                                                                        | `false`              | Read-only input.                                                                                                                                              |
-| `placeholder`       | `string`                                                                         | —                    | Placeholder text.                                                                                                                                             |
-| `format`            | `Intl.DateTimeFormatOptions` \| `string`                                         | `'YYYY-MM-DD HH:mm'` | Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD HH:mm'`.                                                                           |
-| `parse`             | `(s: string) => Date \| null`                                                    | —                    | Custom parser.                                                                                                                                                |
-| `locale`            | `string`                                                                         | —                    | BCP-47 locale tag.                                                                                                                                            |
-| `inline`            | `boolean`                                                                        | `false`              | Render the panel inline (no popover).                                                                                                                         |
-| `mobileNative`      | `boolean` \| `'auto'`                                                            | `'auto'`             | Use `<input type="datetime-local">` on coarse-pointer devices.                                                                                                |
-| `editable`          | `boolean`                                                                        | `true`               | Allow segmented keyboard typing (type the date-time directly across all segments). `false` makes the field picker-only.                                       |
-| `popover`           | `boolean`                                                                        | `true`               | Whether the calendar + time popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`.                            |
-| `openOnFocus`       | `boolean`                                                                        | `true`               | Open the popover on focus. Default `true`.                                                                                                                    |
-| `closeOnSelect`     | `boolean`                                                                        | `false`              | Off by default — users typically tweak both halves before committing.                                                                                         |
-| `position`          | `'bottom-left'` \| `'bottom-right'` \| `'top-left'` \| `'top-right'` \| `'auto'` | `'bottom-left'`      | Popover anchor position.                                                                                                                                      |
-| `appendToBody`      | `boolean`                                                                        | `false`              | Render the popover into `document.body` via portal.                                                                                                           |
-| `color`             | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                    | Bulma color modifier.                                                                                                                                         |
-| `size`              | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Size variant.                                                                                                                                                 |
-| `isRounded`         | `boolean`                                                                        | `false`              | Rounded input corners.                                                                                                                                        |
-| `shouldDisableDate` | `(d: Date) => boolean`                                                           | —                    | Disable specific dates. Blocked dates are also rejected during manual typing (the predicate receives the full candidate date-time — prefer day-based checks). |
-| `unselectableDates` | `Date[]`                                                                         | —                    | Convenience array of disabled dates, matched by calendar day; also rejected by manual typing.                                                                 |
-| `firstDayOfWeek`    | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6`                                    | `0`                  | Day the calendar week starts on.                                                                                                                              |
-| `dayNames`          | `string[]`                                                                       | —                    | Override the 7 day-name labels.                                                                                                                               |
-| `monthNames`        | `string[]`                                                                       | —                    | Override the 12 month-name labels.                                                                                                                            |
-| `nearbyMonthDays`   | `boolean`                                                                        | `true`               | Show dimmed dates from adjacent months.                                                                                                                       |
-| `hourFormat`        | `'12'` \| `'24'`                                                                 | `'24'`               | Time format.                                                                                                                                                  |
-| `enableSeconds`     | `boolean`                                                                        | `false`              | Show seconds column. Note: iOS Safari's native datetime-local picker UI does not include a seconds wheel; pass `mobileNative={false}` if you need one on iOS. |
-| `incrementHours`    | `number`                                                                         | `1`                  | Hour step.                                                                                                                                                    |
-| `incrementMinutes`  | `number`                                                                         | `1`                  | Step between minute-wheel values (`1` = every minute, iOS-style).                                                                                             |
-| `incrementSeconds`  | `number`                                                                         | `1`                  | Step between second-wheel values (only with `enableSeconds`).                                                                                                 |
-| `unselectableTimes` | `(d: Date) => boolean`                                                           | —                    | Block specific times. Blocked times are also rejected during manual typing.                                                                                   |
-| `iconLeftName`      | `string`                                                                         | `'calendar-alt'`     | Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide.                                                                   |
-| `triggerIcon`       | `boolean`                                                                        | `true`               | Show a clickable launcher button on the right that toggles the popover. Default `true`.                                                                       |
-| `triggerIconName`   | `string`                                                                         | `'chevron-down'`     | Glyph for the right launcher button.                                                                                                                          |
-| `audioTick`         | `boolean`                                                                        | `false`              | Play a short audible tick on each time-wheel crossing. Default `false`.                                                                                       |
-| `haptics`           | `boolean`                                                                        | `false`              | Auto-route tactile feedback per wheel tick (vibrate on Android, audio thunk on iOS). Default `false`.                                                         |
-| `labels`            | `PickerLabels`                                                                   | —                    | Optional translatable string overrides.                                                                                                                       |
-| `className`         | `string`                                                                         | —                    | Additional CSS classes.                                                                                                                                       |
-| `ref`               | `React.Ref<HTMLInputElement>`                                                    | —                    | Forwarded to the underlying element.                                                                                                                          |
-| `name`              | `string`                                                                         | —                    | Form field name.                                                                                                                                              |
-| `form`              | `string`                                                                         | —                    | Optional id of the form the input belongs to.                                                                                                                 |
-| `required`          | `boolean`                                                                        | `false`              | Marks the field as required for native HTML form validation.                                                                                                  |
-| `...`               | All standard `<input>` attributes and Bulma helper props                         | —                    | See [Helper Props](../../helpers/usebulmaclasses.md)                                                                                                          |
+| Prop                | Type                                                                             | Default              | Description                                                                                                                                                                                                               |
+| ------------------- | -------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`             | `React.ReactNode`                                                                | —                    | Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`. |
+| `labelSize`         | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                               | —                    | Size for the label.                                                                                                                                                                                                       |
+| `labelProps`        | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`      | —                    | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                                                    |
+| `horizontal`        | `boolean`                                                                        | `false`              | Render the field with horizontal layout.                                                                                                                                                                                  |
+| `iconLeft`          | `IconProps`                                                                      | —                    | Icon props for the left icon.                                                                                                                                                                                             |
+| `iconRight`         | `IconProps`                                                                      | —                    | Icon props for the right icon.                                                                                                                                                                                            |
+| `iconRightName`     | `string`                                                                         | —                    | Shortcut for the right icon name.                                                                                                                                                                                         |
+| `iconLeftSize`      | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Shortcut for left icon size.                                                                                                                                                                                              |
+| `iconRightSize`     | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Shortcut for right icon size.                                                                                                                                                                                             |
+| `hasIconsLeft`      | `boolean`                                                                        | `false`              | Force the left icon container.                                                                                                                                                                                            |
+| `hasIconsRight`     | `boolean`                                                                        | `false`              | Force the right icon container.                                                                                                                                                                                           |
+| `isLoading`         | `boolean`                                                                        | `false`              | Show a loading indicator on the control.                                                                                                                                                                                  |
+| `isExpanded`        | `boolean`                                                                        | `false`              | Expand the control to fill its container.                                                                                                                                                                                 |
+| `controlSize`       | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Size of the wrapping Control.                                                                                                                                                                                             |
+| `message`           | `React.ReactNode`                                                                | —                    | Help/validation text below the input.                                                                                                                                                                                     |
+| `messageColor`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                    | Message color.                                                                                                                                                                                                            |
+| `fieldClassName`    | `string`                                                                         | —                    | Additional CSS classes for the Field wrapper.                                                                                                                                                                             |
+| `controlClassName`  | `string`                                                                         | —                    | Additional CSS classes for the Control wrapper.                                                                                                                                                                           |
+| `value`             | `Date` \| `null`                                                                 | —                    | Controlled selected date-time.                                                                                                                                                                                            |
+| `defaultValue`      | `Date` \| `null`                                                                 | —                    | Initial value for uncontrolled usage.                                                                                                                                                                                     |
+| `onChange`          | `(d: Date \| null) => void`                                                      | —                    | Fired when either the date or time portion changes.                                                                                                                                                                       |
+| `onOpen`            | `() => void`                                                                     | —                    | Fired when the popover opens.                                                                                                                                                                                             |
+| `onClose`           | `() => void`                                                                     | —                    | Fired when the popover closes.                                                                                                                                                                                            |
+| `min`               | `Date`                                                                           | —                    | Lower bound for the combined date-time.                                                                                                                                                                                   |
+| `max`               | `Date`                                                                           | —                    | Upper bound for the combined date-time.                                                                                                                                                                                   |
+| `disabled`          | `boolean`                                                                        | `false`              | Disable the input.                                                                                                                                                                                                        |
+| `readOnly`          | `boolean`                                                                        | `false`              | Read-only input.                                                                                                                                                                                                          |
+| `placeholder`       | `string`                                                                         | —                    | Placeholder text.                                                                                                                                                                                                         |
+| `format`            | `Intl.DateTimeFormatOptions` \| `string`                                         | `'YYYY-MM-DD HH:mm'` | Token format string or `Intl.DateTimeFormat` options. Default `'YYYY-MM-DD HH:mm'`.                                                                                                                                       |
+| `parse`             | `(s: string) => Date \| null`                                                    | —                    | Custom parser.                                                                                                                                                                                                            |
+| `locale`            | `string`                                                                         | —                    | BCP-47 locale tag.                                                                                                                                                                                                        |
+| `inline`            | `boolean`                                                                        | `false`              | Render the panel inline (no popover).                                                                                                                                                                                     |
+| `mobileNative`      | `boolean` \| `'auto'`                                                            | `'auto'`             | Use `<input type="datetime-local">` on coarse-pointer devices.                                                                                                                                                            |
+| `editable`          | `boolean`                                                                        | `true`               | Allow segmented keyboard typing (type the date-time directly across all segments). `false` makes the field picker-only.                                                                                                   |
+| `popover`           | `boolean`                                                                        | `true`               | Whether the calendar + time popover exists. `false` makes the field input-only (segmented typing with no popover). Default `true`.                                                                                        |
+| `openOnFocus`       | `boolean`                                                                        | `true`               | Open the popover on focus. Default `true`.                                                                                                                                                                                |
+| `closeOnSelect`     | `boolean`                                                                        | `false`              | Off by default — users typically tweak both halves before committing.                                                                                                                                                     |
+| `position`          | `'bottom-left'` \| `'bottom-right'` \| `'top-left'` \| `'top-right'` \| `'auto'` | `'bottom-left'`      | Popover anchor position.                                                                                                                                                                                                  |
+| `appendToBody`      | `boolean`                                                                        | `false`              | Render the popover into `document.body` via portal.                                                                                                                                                                       |
+| `color`             | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`  | —                    | Bulma color modifier.                                                                                                                                                                                                     |
+| `size`              | `'small'` \| `'medium'` \| `'large'`                                             | —                    | Size variant.                                                                                                                                                                                                             |
+| `isRounded`         | `boolean`                                                                        | `false`              | Rounded input corners.                                                                                                                                                                                                    |
+| `shouldDisableDate` | `(d: Date) => boolean`                                                           | —                    | Disable specific dates. Blocked dates are also rejected during manual typing (the predicate receives the full candidate date-time — prefer day-based checks).                                                             |
+| `unselectableDates` | `Date[]`                                                                         | —                    | Convenience array of disabled dates, matched by calendar day; also rejected by manual typing.                                                                                                                             |
+| `firstDayOfWeek`    | `0` \| `1` \| `2` \| `3` \| `4` \| `5` \| `6`                                    | `0`                  | Day the calendar week starts on.                                                                                                                                                                                          |
+| `dayNames`          | `string[]`                                                                       | —                    | Override the 7 day-name labels.                                                                                                                                                                                           |
+| `monthNames`        | `string[]`                                                                       | —                    | Override the 12 month-name labels.                                                                                                                                                                                        |
+| `nearbyMonthDays`   | `boolean`                                                                        | `true`               | Show dimmed dates from adjacent months.                                                                                                                                                                                   |
+| `hourFormat`        | `'12'` \| `'24'`                                                                 | `'24'`               | Time format.                                                                                                                                                                                                              |
+| `enableSeconds`     | `boolean`                                                                        | `false`              | Show seconds column. Note: iOS Safari's native datetime-local picker UI does not include a seconds wheel; pass `mobileNative={false}` if you need one on iOS.                                                             |
+| `incrementHours`    | `number`                                                                         | `1`                  | Hour step.                                                                                                                                                                                                                |
+| `incrementMinutes`  | `number`                                                                         | `1`                  | Step between minute-wheel values (`1` = every minute, iOS-style).                                                                                                                                                         |
+| `incrementSeconds`  | `number`                                                                         | `1`                  | Step between second-wheel values (only with `enableSeconds`).                                                                                                                                                             |
+| `unselectableTimes` | `(d: Date) => boolean`                                                           | —                    | Block specific times. Blocked times are also rejected during manual typing.                                                                                                                                               |
+| `iconLeftName`      | `string`                                                                         | `'calendar-alt'`     | Decorative left icon glyph for the wrapping `Control` (shown by default). Set `''` to hide.                                                                                                                               |
+| `triggerIcon`       | `boolean`                                                                        | `true`               | Show a clickable launcher button on the right that toggles the popover. Default `true`.                                                                                                                                   |
+| `triggerIconName`   | `string`                                                                         | `'chevron-down'`     | Glyph for the right launcher button.                                                                                                                                                                                      |
+| `audioTick`         | `boolean`                                                                        | `false`              | Play a short audible tick on each time-wheel crossing. Default `false`.                                                                                                                                                   |
+| `haptics`           | `boolean`                                                                        | `false`              | Auto-route tactile feedback per wheel tick (vibrate on Android, audio thunk on iOS). Default `false`.                                                                                                                     |
+| `labels`            | `PickerLabels`                                                                   | —                    | Optional translatable string overrides.                                                                                                                                                                                   |
+| `className`         | `string`                                                                         | —                    | Additional CSS classes.                                                                                                                                                                                                   |
+| `ref`               | `React.Ref<HTMLInputElement>`                                                    | —                    | Forwarded to the underlying element.                                                                                                                                                                                      |
+| `name`              | `string`                                                                         | —                    | Form field name.                                                                                                                                                                                                          |
+| `form`              | `string`                                                                         | —                    | Optional id of the form the input belongs to.                                                                                                                                                                             |
+| `required`          | `boolean`                                                                        | `false`              | Marks the field as required for native HTML form validation.                                                                                                                                                              |
+| `...`               | All standard `<input>` attributes and Bulma helper props                         | —                    | See [Helper Props](../../helpers/usebulmaclasses.md)                                                                                                                                                                      |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/datetime/timeinput.md b/docs/docs/api/form/datetime/timeinput.md
index 585a0076e..5fbe8511f 100644
--- a/docs/docs/api/form/datetime/timeinput.md
+++ b/docs/docs/api/form/datetime/timeinput.md
@@ -968,9 +968,9 @@ Combine `incrementMinutes={5}` (or `15`/`30`) with `min` and `max` to build a ti
 
 | Prop                | Type                                                                             | Default          | Description                                                                                                                                                                                                                        |
 | ------------------- | -------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`             | `React.ReactNode`                                                                | —                | Field label.                                                                                                                                                                                                                       |
+| `label`             | `React.ReactNode`                                                                | —                | Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired in `inline` mode (no visible input to label) and dropped inside an outer `Field`.          |
 | `labelSize`         | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                               | —                | Size for the label.                                                                                                                                                                                                                |
-| `labelProps`        | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`      | —                | Props for the label element.                                                                                                                                                                                                       |
+| `labelProps`        | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`      | —                | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                                                             |
 | `horizontal`        | `boolean`                                                                        | `false`          | Render the field with horizontal layout.                                                                                                                                                                                           |
 | `iconLeft`          | `IconProps`                                                                      | —                | Icon props for the left icon.                                                                                                                                                                                                      |
 | `iconRight`         | `IconProps`                                                                      | —                | Icon props for the right icon.                                                                                                                                                                                                     |
diff --git a/docs/docs/api/form/field.md b/docs/docs/api/form/field.md
index c26995c77..ce21e62ba 100644
--- a/docs/docs/api/form/field.md
+++ b/docs/docs/api/form/field.md
@@ -489,7 +489,7 @@ Alongside the existing `Field.Label` and `Field.Body` statics, `Control` is now
 
 ## Accessibility
 
-- Uses `<label>` for accessible field labeling.
+- Renders a `<label>` for the field, but `Field` itself does not associate it with any control — pass `labelProps={{ htmlFor }}` and a matching `id` on your control. The single-control convenience inputs (`Input`, `Select`, `TextArea`, and similar) do this automatically via their own `label` prop, but only when used outside an existing `Field`; nested inside one, they drop their `label` prop entirely.
 - Grouped/horizontal layouts use Bulma’s grid for layout.
 - Always use the `label` prop or a custom label for clarity.
 
@@ -514,21 +514,21 @@ Alongside the existing `Field.Label` and `Field.Body` statics, `Control` is now
 
 <!-- bestax:generated props -->
 
-| Prop         | Type                                                                            | Default | Description                                                                        |
-| ------------ | ------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
-| `horizontal` | `boolean`                                                                       | `false` | Renders the field as horizontal (label and control side by side).                  |
-| `grouped`    | `boolean` \| `'centered'` \| `'right'` \| `'multiline'`                         | —       | Group controls in a row (optionally centered, right, or multiline).                |
-| `hasAddons`  | `boolean` \| `'centered'` \| `'right'`                                          | —       | Group controls as addons (optionally centered or right-aligned).                   |
-| `narrow`     | `boolean`                                                                       | `false` | Constrains the field to its content's width (used inside horizontal field bodies). |
-| `label`      | `React.ReactNode`                                                               | —       | Field label, rendered above the widget.                                            |
-| `labelSize`  | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                              | —       | Size for the label.                                                                |
-| `labelProps` | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`     | —       | Props for the label element.                                                       |
-| `textColor`  | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the field.                                                          |
-| `color`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color for the field.                                                         |
-| `bgColor`    | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color for the field.                                                    |
-| `className`  | `string`                                                                        | —       | Additional CSS classes.                                                            |
-| `children`   | `React.ReactNode`                                                               | —       | Field content.                                                                     |
-| `...`        | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                  |
+| Prop         | Type                                                                            | Default | Description                                                                                                                                                                                                                                                           |
+| ------------ | ------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `horizontal` | `boolean`                                                                       | `false` | Renders the field as horizontal (label and control side by side).                                                                                                                                                                                                     |
+| `grouped`    | `boolean` \| `'centered'` \| `'right'` \| `'multiline'`                         | —       | Group controls in a row (optionally centered, right, or multiline).                                                                                                                                                                                                   |
+| `hasAddons`  | `boolean` \| `'centered'` \| `'right'`                                          | —       | Group controls as addons (optionally centered or right-aligned).                                                                                                                                                                                                      |
+| `narrow`     | `boolean`                                                                       | `false` | Constrains the field to its content's width (used inside horizontal field bodies).                                                                                                                                                                                    |
+| `label`      | `React.ReactNode`                                                               | —       | Field label, rendered above the widget. `Field` itself does not associate it with any control — pass `labelProps={{ htmlFor }}` and a matching `id` on your control (the single-control convenience inputs do this automatically when they render their own `Field`). |
+| `labelSize`  | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                              | —       | Size for the label.                                                                                                                                                                                                                                                   |
+| `labelProps` | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`     | —       | Props for the label element — where `htmlFor` goes when composing.                                                                                                                                                                                                    |
+| `textColor`  | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the field.                                                                                                                                                                                                                                             |
+| `color`      | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color for the field.                                                                                                                                                                                                                                            |
+| `bgColor`    | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Background color for the field.                                                                                                                                                                                                                                       |
+| `className`  | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                                                                                                                               |
+| `children`   | `React.ReactNode`                                                               | —       | Field content.                                                                                                                                                                                                                                                        |
+| `...`        | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                                                     |
 
 **Subcomponents:**
 
diff --git a/docs/docs/api/form/file.md b/docs/docs/api/form/file.md
index 38712e24a..a8c64055f 100644
--- a/docs/docs/api/form/file.md
+++ b/docs/docs/api/form/file.md
@@ -404,6 +404,7 @@ function example() {
 
 - The root is a `<div class="file">` with a nested `<label>` and `<input type="file">`.
 - The label is always clickable.
+- When `File` renders its own `Field` (that is, outside an existing one), the Field-level `label` prop is automatically associated with the file input via `htmlFor`, so the input then has two labels (the Field label plus the wrapping CTA label); assistive technology reads both. An explicit `labelProps.htmlFor` overrides the association and no id is generated.
 - Add `aria-label` to the `<input>` for accessibility if your label is not plain text.
 
 ---
@@ -427,30 +428,30 @@ function example() {
 
 <!-- bestax:generated props -->
 
-| Prop             | Type                                                                                                                               | Default | Description                                                 |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------- |
-| `color`          | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the file input.                    |
-| `size`           | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the file input.                           |
-| `isBoxed`        | `boolean`                                                                                                                          | `false` | Boxed file input.                                           |
-| `isFullwidth`    | `boolean`                                                                                                                          | `false` | Whether the file input expands to full width.               |
-| `isRight`        | `boolean`                                                                                                                          | `false` | Position the CTA on the right (with `hasName`).             |
-| `isCentered`     | `boolean`                                                                                                                          | `false` | Center the file input within its container.                 |
-| `hasName`        | `boolean`                                                                                                                          | `false` | Show a file name indicator.                                 |
-| `buttonLabel`    | `React.ReactNode`                                                                                                                  | —       | Text on the file CTA button (defaults to "Choose a file…"). |
-| `iconLeft`       | `React.ReactNode`                                                                                                                  | —       | Left icon element.                                          |
-| `iconRight`      | `React.ReactNode`                                                                                                                  | —       | Right icon element.                                         |
-| `className`      | `string`                                                                                                                           | —       | Additional CSS classes to apply.                            |
-| `inputClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the `<input>`.                   |
-| `fileName`       | `string`                                                                                                                           | —       | File name to display.                                       |
-| `label`          | `React.ReactNode`                                                                                                                  | —       | Field label, rendered above the widget.                     |
-| `labelSize`      | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label (used in horizontal layouts).            |
-| `labelProps`     | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element.                                |
-| `horizontal`     | `boolean`                                                                                                                          | `false` | Horizontal field layout.                                    |
-| `message`        | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the input.                    |
-| `messageColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                                |
-| `fieldClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Field wrapper.               |
-| `ref`            | `React.Ref<HTMLInputElement>`                                                                                                      | —       | Forwarded to the underlying element.                        |
-| `...`            | All standard `<input>` attributes and Bulma helper props                                                                           | —       | See [Helper Props](../helpers/usebulmaclasses.md)           |
+| Prop             | Type                                                                                                                               | Default | Description                                                                                                                                                                                                                                                                                           |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`          | `React.ReactNode`                                                                                                                  | —       | Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field` (label that `Field` yourself). |
+| `labelProps`     | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                                                                                                                                |
+| `color`          | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the file input.                                                                                                                                                                                                                                                              |
+| `size`           | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the file input.                                                                                                                                                                                                                                                                     |
+| `isBoxed`        | `boolean`                                                                                                                          | `false` | Boxed file input.                                                                                                                                                                                                                                                                                     |
+| `isFullwidth`    | `boolean`                                                                                                                          | `false` | Whether the file input expands to full width.                                                                                                                                                                                                                                                         |
+| `isRight`        | `boolean`                                                                                                                          | `false` | Position the CTA on the right (with `hasName`).                                                                                                                                                                                                                                                       |
+| `isCentered`     | `boolean`                                                                                                                          | `false` | Center the file input within its container.                                                                                                                                                                                                                                                           |
+| `hasName`        | `boolean`                                                                                                                          | `false` | Show a file name indicator.                                                                                                                                                                                                                                                                           |
+| `buttonLabel`    | `React.ReactNode`                                                                                                                  | —       | Text on the file CTA button (defaults to "Choose a file…").                                                                                                                                                                                                                                           |
+| `iconLeft`       | `React.ReactNode`                                                                                                                  | —       | Left icon element.                                                                                                                                                                                                                                                                                    |
+| `iconRight`      | `React.ReactNode`                                                                                                                  | —       | Right icon element.                                                                                                                                                                                                                                                                                   |
+| `className`      | `string`                                                                                                                           | —       | Additional CSS classes to apply.                                                                                                                                                                                                                                                                      |
+| `inputClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the `<input>`.                                                                                                                                                                                                                                                             |
+| `fileName`       | `string`                                                                                                                           | —       | File name to display.                                                                                                                                                                                                                                                                                 |
+| `labelSize`      | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label (used in horizontal layouts).                                                                                                                                                                                                                                                      |
+| `horizontal`     | `boolean`                                                                                                                          | `false` | Horizontal field layout.                                                                                                                                                                                                                                                                              |
+| `message`        | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the input.                                                                                                                                                                                                                                                              |
+| `messageColor`   | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                                                                                                                                                                                                                                                                          |
+| `fieldClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Field wrapper.                                                                                                                                                                                                                                                         |
+| `ref`            | `React.Ref<HTMLInputElement>`                                                                                                      | —       | Forwarded to the underlying element.                                                                                                                                                                                                                                                                  |
+| `...`            | All standard `<input>` attributes and Bulma helper props                                                                           | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                                                                                     |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/input.md b/docs/docs/api/form/input.md
index 26056728a..b410173af 100644
--- a/docs/docs/api/form/input.md
+++ b/docs/docs/api/form/input.md
@@ -566,7 +566,8 @@ function example() {
 
 ## Accessibility
 
-- Always provide a `<label>` (use with `Field`) for accessible input usage.
+- Always provide a label. The `label` prop is automatically associated with the input (`htmlFor` plus a generated `id`, or your own `id` if you pass one), so clicking the label focuses the input and assistive technology announces it.
+- When composing with `Field` instead, pass `labelProps={{ htmlFor }}` on the `Field` and a matching `id` on the input yourself.
 - Use the correct input `type` for semantics (`text`, `email`, etc.).
 
 ---
@@ -589,38 +590,38 @@ function example() {
 
 <!-- bestax:generated props -->
 
-| Prop               | Type                                                                                                                               | Default | Description                                       |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `label`            | `React.ReactNode`                                                                                                                  | —       | Field label.                                      |
-| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label.                               |
-| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element.                      |
-| `horizontal`       | `boolean`                                                                                                                          | `false` | Horizontal field layout.                          |
-| `iconLeft`         | `IconProps`                                                                                                                        | —       | Icon props for left icon.                         |
-| `iconRight`        | `IconProps`                                                                                                                        | —       | Icon props for right icon.                        |
-| `iconLeftName`     | `string`                                                                                                                           | —       | Shortcut for left icon name.                      |
-| `iconRightName`    | `string`                                                                                                                           | —       | Shortcut for right icon name.                     |
-| `iconLeftSize`     | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Shortcut for left icon size.                      |
-| `iconRightSize`    | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Shortcut for right icon size.                     |
-| `hasIconsLeft`     | `boolean`                                                                                                                          | `false` | Force left icon container.                        |
-| `hasIconsRight`    | `boolean`                                                                                                                          | `false` | Force right icon container.                       |
-| `isLoading`        | `boolean`                                                                                                                          | `false` | Shows loading indicator.                          |
-| `isExpanded`       | `boolean`                                                                                                                          | `false` | Expand the control.                               |
-| `controlSize`      | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Control size.                                     |
-| `message`          | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the input.          |
-| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                      |
-| `fieldClassName`   | `string`                                                                                                                           | —       | Additional CSS classes for the Field.             |
-| `controlClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Control.           |
-| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the input.               |
-| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the input.                      |
-| `isRounded`        | `boolean`                                                                                                                          | `false` | Rounded input corners.                            |
-| `isStatic`         | `boolean`                                                                                                                          | `false` | Renders input as static (read only, styled).      |
-| `isHovered`        | `boolean`                                                                                                                          | `false` | Applies hovered state.                            |
-| `isFocused`        | `boolean`                                                                                                                          | `false` | Applies focused state.                            |
-| `className`        | `string`                                                                                                                           | —       | Additional CSS classes to apply.                  |
-| `disabled`         | `boolean`                                                                                                                          | `false` | Disabled input.                                   |
-| `readOnly`         | `boolean`                                                                                                                          | `false` | Read-only input.                                  |
-| `ref`              | `React.Ref<HTMLInputElement>`                                                                                                      | —       | Forwarded to the underlying element.              |
-| `...`              | All standard `<input>` attributes and Bulma helper props                                                                           | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop               | Type                                                                                                                               | Default | Description                                                                                                                                                                                  |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`            | `React.ReactNode`                                                                                                                  | —       | Field label. Automatically associated with the input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). |
+| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label.                                                                                                                                                                          |
+| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                       |
+| `horizontal`       | `boolean`                                                                                                                          | `false` | Horizontal field layout.                                                                                                                                                                     |
+| `iconLeft`         | `IconProps`                                                                                                                        | —       | Icon props for left icon.                                                                                                                                                                    |
+| `iconRight`        | `IconProps`                                                                                                                        | —       | Icon props for right icon.                                                                                                                                                                   |
+| `iconLeftName`     | `string`                                                                                                                           | —       | Shortcut for left icon name.                                                                                                                                                                 |
+| `iconRightName`    | `string`                                                                                                                           | —       | Shortcut for right icon name.                                                                                                                                                                |
+| `iconLeftSize`     | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Shortcut for left icon size.                                                                                                                                                                 |
+| `iconRightSize`    | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Shortcut for right icon size.                                                                                                                                                                |
+| `hasIconsLeft`     | `boolean`                                                                                                                          | `false` | Force left icon container.                                                                                                                                                                   |
+| `hasIconsRight`    | `boolean`                                                                                                                          | `false` | Force right icon container.                                                                                                                                                                  |
+| `isLoading`        | `boolean`                                                                                                                          | `false` | Shows loading indicator.                                                                                                                                                                     |
+| `isExpanded`       | `boolean`                                                                                                                          | `false` | Expand the control.                                                                                                                                                                          |
+| `controlSize`      | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Control size.                                                                                                                                                                                |
+| `message`          | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the input.                                                                                                                                                     |
+| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                                                                                                                                                                 |
+| `fieldClassName`   | `string`                                                                                                                           | —       | Additional CSS classes for the Field.                                                                                                                                                        |
+| `controlClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Control.                                                                                                                                                      |
+| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the input.                                                                                                                                                          |
+| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the input.                                                                                                                                                                 |
+| `isRounded`        | `boolean`                                                                                                                          | `false` | Rounded input corners.                                                                                                                                                                       |
+| `isStatic`         | `boolean`                                                                                                                          | `false` | Renders input as static (read only, styled).                                                                                                                                                 |
+| `isHovered`        | `boolean`                                                                                                                          | `false` | Applies hovered state.                                                                                                                                                                       |
+| `isFocused`        | `boolean`                                                                                                                          | `false` | Applies focused state.                                                                                                                                                                       |
+| `className`        | `string`                                                                                                                           | —       | Additional CSS classes to apply.                                                                                                                                                             |
+| `disabled`         | `boolean`                                                                                                                          | `false` | Disabled input.                                                                                                                                                                              |
+| `readOnly`         | `boolean`                                                                                                                          | `false` | Read-only input.                                                                                                                                                                             |
+| `ref`              | `React.Ref<HTMLInputElement>`                                                                                                      | —       | Forwarded to the underlying element.                                                                                                                                                         |
+| `...`              | All standard `<input>` attributes and Bulma helper props                                                                           | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                            |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/numberinput.md b/docs/docs/api/form/numberinput.md
index 03015e670..9ba017306 100644
--- a/docs/docs/api/form/numberinput.md
+++ b/docs/docs/api/form/numberinput.md
@@ -302,36 +302,36 @@ Set `editable={false}` when you want users to only use the +/- buttons, preventi
 
 <!-- bestax:generated props -->
 
-| Prop               | Type                                                                                                     | Default       | Description                                               |
-| ------------------ | -------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------- |
-| `value`            | `number`                                                                                                 | —             | Controlled value.                                         |
-| `defaultValue`     | `number`                                                                                                 | —             | Default value for uncontrolled usage.                     |
-| `min`              | `number`                                                                                                 | —             | Minimum allowed value.                                    |
-| `max`              | `number`                                                                                                 | —             | Maximum allowed value.                                    |
-| `step`             | `number`                                                                                                 | `1`           | Step increment (default: 1).                              |
-| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                     | —             | Size variant.                                             |
-| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'light'` \| `'dark'` | —             | Color variant for buttons.                                |
-| `inputColor`       | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                          | —             | Color of the input field itself.                          |
-| `controlsPosition` | `'left'` \| `'right'` \| `'both'`                                                                        | `'both'`      | Position of +/- buttons.                                  |
-| `controlsRounded`  | `boolean`                                                                                                | `false`       | Use rounded buttons.                                      |
-| `compact`          | `boolean`                                                                                                | `false`       | Uses compact button spacing.                              |
-| `bare`             | `boolean`                                                                                                | `false`       | Removes button borders and background.                    |
-| `variant`          | `'plusminus'` \| `'stepper'`                                                                             | `'plusminus'` | Style variant for the control buttons.                    |
-| `disabled`         | `boolean`                                                                                                | `false`       | Whether the input is disabled.                            |
-| `editable`         | `boolean`                                                                                                | `true`        | Whether the input can be typed in.                        |
-| `isLoading`        | `boolean`                                                                                                | `false`       | Shows a loading state.                                    |
-| `exponential`      | `boolean`                                                                                                | `false`       | Enables exponential step increments when holding buttons. |
-| `onChange`         | `(value: number) => void`                                                                                | —             | Callback when value changes.                              |
-| `label`            | `React.ReactNode`                                                                                        | —             | Field label, rendered above the widget.                   |
-| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                       | —             | Size for the label (used in horizontal layouts).          |
-| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                              | —             | Props for the label element.                              |
-| `horizontal`       | `boolean`                                                                                                | `false`       | Horizontal field layout.                                  |
-| `message`          | `React.ReactNode`                                                                                        | —             | Help/validation message below the input.                  |
-| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                          | —             | Bulma color for the message.                              |
-| `fieldClassName`   | `string`                                                                                                 | —             | Additional CSS classes for the Field wrapper.             |
-| `className`        | `string`                                                                                                 | —             | Additional CSS classes.                                   |
-| `ref`              | `React.Ref<HTMLElement>`                                                                                 | —             | Ref forwarded to the input element.                       |
-| `...`              | All standard `<input>` attributes and Bulma helper props                                                 | —             | See [Helper Props](../helpers/usebulmaclasses.md)         |
+| Prop               | Type                                                                                                     | Default       | Description                                                                                                                                                                                                               |
+| ------------------ | -------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`            | `React.ReactNode`                                                                                        | —             | Field label. Automatically associated with the number input via `htmlFor` — uses your `id` when provided, otherwise a generated one. Not wired when no Field wrapper is rendered (inside a `Field`, or plusminus `bare`). |
+| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                              | —             | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                                                    |
+| `value`            | `number`                                                                                                 | —             | Controlled value.                                                                                                                                                                                                         |
+| `defaultValue`     | `number`                                                                                                 | —             | Default value for uncontrolled usage.                                                                                                                                                                                     |
+| `min`              | `number`                                                                                                 | —             | Minimum allowed value.                                                                                                                                                                                                    |
+| `max`              | `number`                                                                                                 | —             | Maximum allowed value.                                                                                                                                                                                                    |
+| `step`             | `number`                                                                                                 | `1`           | Step increment (default: 1).                                                                                                                                                                                              |
+| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                     | —             | Size variant.                                                                                                                                                                                                             |
+| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'light'` \| `'dark'` | —             | Color variant for buttons.                                                                                                                                                                                                |
+| `inputColor`       | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                          | —             | Color of the input field itself.                                                                                                                                                                                          |
+| `controlsPosition` | `'left'` \| `'right'` \| `'both'`                                                                        | `'both'`      | Position of +/- buttons.                                                                                                                                                                                                  |
+| `controlsRounded`  | `boolean`                                                                                                | `false`       | Use rounded buttons.                                                                                                                                                                                                      |
+| `compact`          | `boolean`                                                                                                | `false`       | Uses compact button spacing.                                                                                                                                                                                              |
+| `bare`             | `boolean`                                                                                                | `false`       | Removes button borders and background.                                                                                                                                                                                    |
+| `variant`          | `'plusminus'` \| `'stepper'`                                                                             | `'plusminus'` | Style variant for the control buttons.                                                                                                                                                                                    |
+| `disabled`         | `boolean`                                                                                                | `false`       | Whether the input is disabled.                                                                                                                                                                                            |
+| `editable`         | `boolean`                                                                                                | `true`        | Whether the input can be typed in.                                                                                                                                                                                        |
+| `isLoading`        | `boolean`                                                                                                | `false`       | Shows a loading state.                                                                                                                                                                                                    |
+| `exponential`      | `boolean`                                                                                                | `false`       | Enables exponential step increments when holding buttons.                                                                                                                                                                 |
+| `onChange`         | `(value: number) => void`                                                                                | —             | Callback when value changes.                                                                                                                                                                                              |
+| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                       | —             | Size for the label (used in horizontal layouts).                                                                                                                                                                          |
+| `horizontal`       | `boolean`                                                                                                | `false`       | Horizontal field layout.                                                                                                                                                                                                  |
+| `message`          | `React.ReactNode`                                                                                        | —             | Help/validation message below the input.                                                                                                                                                                                  |
+| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                          | —             | Bulma color for the message.                                                                                                                                                                                              |
+| `fieldClassName`   | `string`                                                                                                 | —             | Additional CSS classes for the Field wrapper.                                                                                                                                                                             |
+| `className`        | `string`                                                                                                 | —             | Additional CSS classes.                                                                                                                                                                                                   |
+| `ref`              | `React.Ref<HTMLElement>`                                                                                 | —             | Ref forwarded to the input element.                                                                                                                                                                                       |
+| `...`              | All standard `<input>` attributes and Bulma helper props                                                 | —             | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                         |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/select.md b/docs/docs/api/form/select.md
index cd248d6fd..7d8bf79e6 100644
--- a/docs/docs/api/form/select.md
+++ b/docs/docs/api/form/select.md
@@ -407,7 +407,8 @@ function example() {
 
 ## Accessibility
 
-- Always provide a `<label>` (use Select's `label` prop, or wrap in `Field`) for accessible select usage.
+- Always provide a label. Select's `label` prop is automatically associated with the `<select>` (`htmlFor` plus a generated `id`, or your own `id` if you pass one).
+- When composing with `Field` instead, pass `labelProps={{ htmlFor }}` on the `Field` and a matching `id` on the select yourself.
 - Use the `multiple` and `multipleSize` props for multi-select dropdowns.
 
 ---
@@ -430,37 +431,37 @@ function example() {
 
 <!-- bestax:generated props -->
 
-| Prop               | Type                                                                                                                               | Default | Description                                       |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `label`            | `React.ReactNode`                                                                                                                  | —       | Field label.                                      |
-| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label.                               |
-| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element.                      |
-| `horizontal`       | `boolean`                                                                                                                          | `false` | Horizontal field layout.                          |
-| `iconLeft`         | `IconProps`                                                                                                                        | —       | Icon props for left icon.                         |
-| `iconLeftName`     | `string`                                                                                                                           | —       | Shortcut for left icon name.                      |
-| `iconLeftSize`     | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Shortcut for left icon size.                      |
-| `hasIconsLeft`     | `boolean`                                                                                                                          | `false` | Force left icon container.                        |
-| `isLoading`        | `boolean`                                                                                                                          | `false` | Shows loading indicator.                          |
-| `isExpanded`       | `boolean`                                                                                                                          | `false` | Expand the control.                               |
-| `controlSize`      | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Control size.                                     |
-| `message`          | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the select.         |
-| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                      |
-| `fieldClassName`   | `string`                                                                                                                           | —       | Additional CSS classes for the Field.             |
-| `controlClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Control.           |
-| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the select.              |
-| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the select.                     |
-| `isRounded`        | `boolean`                                                                                                                          | `false` | Rounded select corners.                           |
-| `isActive`         | `boolean`                                                                                                                          | `false` | Applies Bulma's is-active modifier.               |
-| `isHovered`        | `boolean`                                                                                                                          | `false` | Forces hovered state on the inner select.         |
-| `isFocused`        | `boolean`                                                                                                                          | `false` | Forces focused state on the inner select.         |
-| `isFullwidth`      | `boolean`                                                                                                                          | `false` | Makes the select span the full width of parent.   |
-| `className`        | `string`                                                                                                                           | —       | Additional CSS classes to apply.                  |
-| `disabled`         | `boolean`                                                                                                                          | `false` | Disables the select.                              |
-| `multiple`         | `boolean`                                                                                                                          | `false` | Allows multiple selections.                       |
-| `multipleSize`     | `number`                                                                                                                           | —       | Number of visible options in multiselect.         |
-| `children`         | `React.ReactNode`                                                                                                                  | —       | `<option>` elements.                              |
-| `ref`              | `React.Ref<HTMLSelectElement>`                                                                                                     | —       | Forwarded to the underlying element.              |
-| `...`              | All standard `<select>` attributes and Bulma helper props                                                                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop               | Type                                                                                                                               | Default | Description                                                                                                                                                                                   |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`            | `React.ReactNode`                                                                                                                  | —       | Field label. Automatically associated with the select via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). |
+| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label.                                                                                                                                                                           |
+| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                        |
+| `horizontal`       | `boolean`                                                                                                                          | `false` | Horizontal field layout.                                                                                                                                                                      |
+| `iconLeft`         | `IconProps`                                                                                                                        | —       | Icon props for left icon.                                                                                                                                                                     |
+| `iconLeftName`     | `string`                                                                                                                           | —       | Shortcut for left icon name.                                                                                                                                                                  |
+| `iconLeftSize`     | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Shortcut for left icon size.                                                                                                                                                                  |
+| `hasIconsLeft`     | `boolean`                                                                                                                          | `false` | Force left icon container.                                                                                                                                                                    |
+| `isLoading`        | `boolean`                                                                                                                          | `false` | Shows loading indicator.                                                                                                                                                                      |
+| `isExpanded`       | `boolean`                                                                                                                          | `false` | Expand the control.                                                                                                                                                                           |
+| `controlSize`      | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Control size.                                                                                                                                                                                 |
+| `message`          | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the select.                                                                                                                                                     |
+| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                                                                                                                                                                  |
+| `fieldClassName`   | `string`                                                                                                                           | —       | Additional CSS classes for the Field.                                                                                                                                                         |
+| `controlClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Control.                                                                                                                                                       |
+| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the select.                                                                                                                                                          |
+| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the select.                                                                                                                                                                 |
+| `isRounded`        | `boolean`                                                                                                                          | `false` | Rounded select corners.                                                                                                                                                                       |
+| `isActive`         | `boolean`                                                                                                                          | `false` | Applies Bulma's is-active modifier.                                                                                                                                                           |
+| `isHovered`        | `boolean`                                                                                                                          | `false` | Forces hovered state on the inner select.                                                                                                                                                     |
+| `isFocused`        | `boolean`                                                                                                                          | `false` | Forces focused state on the inner select.                                                                                                                                                     |
+| `isFullwidth`      | `boolean`                                                                                                                          | `false` | Makes the select span the full width of parent.                                                                                                                                               |
+| `className`        | `string`                                                                                                                           | —       | Additional CSS classes to apply.                                                                                                                                                              |
+| `disabled`         | `boolean`                                                                                                                          | `false` | Disables the select.                                                                                                                                                                          |
+| `multiple`         | `boolean`                                                                                                                          | `false` | Allows multiple selections.                                                                                                                                                                   |
+| `multipleSize`     | `number`                                                                                                                           | —       | Number of visible options in multiselect.                                                                                                                                                     |
+| `children`         | `React.ReactNode`                                                                                                                  | —       | `<option>` elements.                                                                                                                                                                          |
+| `ref`              | `React.Ref<HTMLSelectElement>`                                                                                                     | —       | Forwarded to the underlying element.                                                                                                                                                          |
+| `...`              | All standard `<select>` attributes and Bulma helper props                                                                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                             |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/slider.md b/docs/docs/api/form/slider.md
index 18aceaef2..28bde5793 100644
--- a/docs/docs/api/form/slider.md
+++ b/docs/docs/api/form/slider.md
@@ -341,42 +341,42 @@ Use the `formatOutput` prop to display values with units like percentages, curre
 
 <!-- bestax:generated props -->
 
-| Prop               | Type                                                                            | Default        | Description                                                                                        |
-| ------------------ | ------------------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------- |
-| `range`            | `boolean`                                                                       | `false`        | Enables range mode with two thumbs.                                                                |
-| `value`            | `number` \| `[number, number]`                                                  | —              | Controlled value.                                                                                  |
-| `defaultValue`     | `number` \| `[number, number]`                                                  | `0`            | Default value for uncontrolled usage.                                                              |
-| `onChange`         | `(value: number) => void` \| `(value: [number, number]) => void`                | —              | Callback when value changes.                                                                       |
-| `minDistance`      | `number`                                                                        | `0`            | Minimum distance between thumbs in range mode.                                                     |
-| `ariaLabel`        | `string` \| `[string, string]`                                                  | —              | ARIA label(s) for the slider thumb(s).                                                             |
-| `nameLow`          | `string`                                                                        | —              | Form field name for the low thumb. Use this in range mode so each thumb submits with its own name. |
-| `nameHigh`         | `string`                                                                        | —              | Form field name for the high thumb.                                                                |
-| `min`              | `number`                                                                        | `0`            | Minimum value.                                                                                     |
-| `max`              | `number`                                                                        | `100`          | Maximum value.                                                                                     |
-| `step`             | `number`                                                                        | `1`            | Step increment (default: 1).                                                                       |
-| `size`             | `'small'` \| `'medium'` \| `'large'`                                            | —              | Size variant.                                                                                      |
-| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —              | Color variant.                                                                                     |
-| `isRounded`        | `boolean`                                                                       | `false`        | Use rounded track ends.                                                                            |
-| `isCircle`         | `boolean`                                                                       | `false`        | Use circular thumb.                                                                                |
-| `showOutput`       | `boolean`                                                                       | `false`        | Show current value tooltip.                                                                        |
-| `tooltip`          | `'auto'` \| `'always'` \| `'hidden'`                                            | —              | Controls tooltip visibility on the thumb.                                                          |
-| `ticks`            | `boolean`                                                                       | `false`        | Shows tick marks along the track.                                                                  |
-| `marks`            | `{ value: number; label?: React.ReactNode }[]`                                  | —              | Custom labeled marks along the track. Each mark has `{ value: number; label?: ReactNode }`.        |
-| `orientation`      | `'horizontal'` \| `'vertical'`                                                  | `'horizontal'` | Orientation of the slider.                                                                         |
-| `scale`            | `(value: number) => number`                                                     | —              | Function to scale the displayed value.                                                             |
-| `getAriaValueText` | `(value: number) => string`                                                     | —              | Function to generate the `aria-valuetext` attribute.                                               |
-| `formatOutput`     | `(value: number) => string`                                                     | —              | Format function for output display.                                                                |
-| `label`            | `React.ReactNode`                                                               | —              | Field label, rendered above the widget.                                                            |
-| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                              | —              | Size for the label (used in horizontal layouts).                                                   |
-| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`     | —              | Props for the label element.                                                                       |
-| `horizontal`       | `boolean`                                                                       | `false`        | Horizontal field layout.                                                                           |
-| `message`          | `React.ReactNode`                                                               | —              | Help/validation message below the input.                                                           |
-| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —              | Bulma color for the message.                                                                       |
-| `fieldClassName`   | `string`                                                                        | —              | Additional CSS classes for the Field wrapper.                                                      |
-| `disabled`         | `boolean`                                                                       | `false`        | Whether the slider is disabled.                                                                    |
-| `className`        | `string`                                                                        | —              | Additional CSS classes.                                                                            |
-| `ref`              | `React.Ref<HTMLElement>`                                                        | —              | Ref forwarded to the input element.                                                                |
-| `...`              | All standard `<input>` attributes and Bulma helper props                        | —              | See [Helper Props](../helpers/usebulmaclasses.md)                                                  |
+| Prop               | Type                                                                            | Default        | Description                                                                                                                                                                                                                                                  |
+| ------------------ | ------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `range`            | `boolean`                                                                       | `false`        | Enables range mode with two thumbs.                                                                                                                                                                                                                          |
+| `value`            | `number` \| `[number, number]`                                                  | —              | Controlled value.                                                                                                                                                                                                                                            |
+| `defaultValue`     | `number` \| `[number, number]`                                                  | `0`            | Default value for uncontrolled usage.                                                                                                                                                                                                                        |
+| `onChange`         | `(value: number) => void` \| `(value: [number, number]) => void`                | —              | Callback when value changes.                                                                                                                                                                                                                                 |
+| `minDistance`      | `number`                                                                        | `0`            | Minimum distance between thumbs in range mode.                                                                                                                                                                                                               |
+| `ariaLabel`        | `string` \| `[string, string]`                                                  | —              | ARIA label(s) for the slider thumb(s).                                                                                                                                                                                                                       |
+| `nameLow`          | `string`                                                                        | —              | Form field name for the low thumb. Use this in range mode so each thumb submits with its own name.                                                                                                                                                           |
+| `nameHigh`         | `string`                                                                        | —              | Form field name for the high thumb.                                                                                                                                                                                                                          |
+| `label`            | `React.ReactNode`                                                               | —              | Field label. Automatically associated with the slider input via `htmlFor` — uses your `id` when provided, otherwise a generated one. In range mode the label targets the low (minimum) thumb. Dropped inside an outer `Field` (label that `Field` yourself). |
+| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`     | —              | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                                                                                       |
+| `min`              | `number`                                                                        | `0`            | Minimum value.                                                                                                                                                                                                                                               |
+| `max`              | `number`                                                                        | `100`          | Maximum value.                                                                                                                                                                                                                                               |
+| `step`             | `number`                                                                        | `1`            | Step increment (default: 1).                                                                                                                                                                                                                                 |
+| `size`             | `'small'` \| `'medium'` \| `'large'`                                            | —              | Size variant.                                                                                                                                                                                                                                                |
+| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —              | Color variant.                                                                                                                                                                                                                                               |
+| `isRounded`        | `boolean`                                                                       | `false`        | Use rounded track ends.                                                                                                                                                                                                                                      |
+| `isCircle`         | `boolean`                                                                       | `false`        | Use circular thumb.                                                                                                                                                                                                                                          |
+| `showOutput`       | `boolean`                                                                       | `false`        | Show current value tooltip.                                                                                                                                                                                                                                  |
+| `tooltip`          | `'auto'` \| `'always'` \| `'hidden'`                                            | —              | Controls tooltip visibility on the thumb.                                                                                                                                                                                                                    |
+| `ticks`            | `boolean`                                                                       | `false`        | Shows tick marks along the track.                                                                                                                                                                                                                            |
+| `marks`            | `{ value: number; label?: React.ReactNode }[]`                                  | —              | Custom labeled marks along the track. Each mark has `{ value: number; label?: ReactNode }`.                                                                                                                                                                  |
+| `orientation`      | `'horizontal'` \| `'vertical'`                                                  | `'horizontal'` | Orientation of the slider.                                                                                                                                                                                                                                   |
+| `scale`            | `(value: number) => number`                                                     | —              | Function to scale the displayed value.                                                                                                                                                                                                                       |
+| `getAriaValueText` | `(value: number) => string`                                                     | —              | Function to generate the `aria-valuetext` attribute.                                                                                                                                                                                                         |
+| `formatOutput`     | `(value: number) => string`                                                     | —              | Format function for output display.                                                                                                                                                                                                                          |
+| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                              | —              | Size for the label (used in horizontal layouts).                                                                                                                                                                                                             |
+| `horizontal`       | `boolean`                                                                       | `false`        | Horizontal field layout.                                                                                                                                                                                                                                     |
+| `message`          | `React.ReactNode`                                                               | —              | Help/validation message below the input.                                                                                                                                                                                                                     |
+| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —              | Bulma color for the message.                                                                                                                                                                                                                                 |
+| `fieldClassName`   | `string`                                                                        | —              | Additional CSS classes for the Field wrapper.                                                                                                                                                                                                                |
+| `disabled`         | `boolean`                                                                       | `false`        | Whether the slider is disabled.                                                                                                                                                                                                                              |
+| `className`        | `string`                                                                        | —              | Additional CSS classes.                                                                                                                                                                                                                                      |
+| `ref`              | `React.Ref<HTMLElement>`                                                        | —              | Ref forwarded to the input element.                                                                                                                                                                                                                          |
+| `...`              | All standard `<input>` attributes and Bulma helper props                        | —              | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                                            |
 
 <!-- /bestax:generated props -->
 
diff --git a/docs/docs/api/form/textarea.md b/docs/docs/api/form/textarea.md
index f2580b447..4e41d9350 100644
--- a/docs/docs/api/form/textarea.md
+++ b/docs/docs/api/form/textarea.md
@@ -231,7 +231,8 @@ function example() {
 
 ## Accessibility
 
-- Always provide a `<label>` (use TextArea's `label` prop, or wrap in `Field`) for accessible usage.
+- Always provide a label. TextArea's `label` prop is automatically associated with the `<textarea>` (`htmlFor` plus a generated `id`, or your own `id` if you pass one).
+- When composing with `Field` instead, pass `labelProps={{ htmlFor }}` on the `Field` and a matching `id` on the textarea yourself.
 - Use the `rows` prop to set an appropriate height for your content.
 
 ---
@@ -254,32 +255,32 @@ function example() {
 
 <!-- bestax:generated props -->
 
-| Prop               | Type                                                                                                                               | Default | Description                                       |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `label`            | `React.ReactNode`                                                                                                                  | —       | Field label.                                      |
-| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label.                               |
-| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element.                      |
-| `horizontal`       | `boolean`                                                                                                                          | `false` | Horizontal field layout.                          |
-| `isLoading`        | `boolean`                                                                                                                          | `false` | Shows loading indicator on the wrapping Control.  |
-| `controlSize`      | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Control size.                                     |
-| `message`          | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the textarea.       |
-| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                      |
-| `fieldClassName`   | `string`                                                                                                                           | —       | Additional CSS classes for the Field.             |
-| `controlClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Control.           |
-| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the textarea.            |
-| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the textarea.                   |
-| `isRounded`        | `boolean`                                                                                                                          | `false` | Rounded textarea corners.                         |
-| `isStatic`         | `boolean`                                                                                                                          | `false` | Renders textarea as static (styled readonly).     |
-| `isHovered`        | `boolean`                                                                                                                          | `false` | Applies hovered state.                            |
-| `isFocused`        | `boolean`                                                                                                                          | `false` | Applies focused state.                            |
-| `isActive`         | `boolean`                                                                                                                          | `false` | Applies Bulma's is-active modifier.               |
-| `hasFixedSize`     | `boolean`                                                                                                                          | `false` | Fixed textarea size (no resize).                  |
-| `className`        | `string`                                                                                                                           | —       | Additional CSS classes to apply.                  |
-| `disabled`         | `boolean`                                                                                                                          | `false` | Disables the textarea.                            |
-| `readOnly`         | `boolean`                                                                                                                          | `false` | Read-only textarea.                               |
-| `rows`             | `number`                                                                                                                           | —       | Number of visible text lines.                     |
-| `ref`              | `React.Ref<HTMLTextAreaElement>`                                                                                                   | —       | Forwarded to the underlying element.              |
-| `...`              | All standard `<textarea>` attributes and Bulma helper props                                                                        | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop               | Type                                                                                                                               | Default | Description                                                                                                                                                                                     |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`            | `React.ReactNode`                                                                                                                  | —       | Field label. Automatically associated with the textarea via `htmlFor` — uses your `id` when provided, otherwise a generated one. Dropped inside an outer `Field` (label that `Field` yourself). |
+| `labelSize`        | `'small'` \| `'normal'` \| `'medium'` \| `'large'`                                                                                 | —       | Size for the label.                                                                                                                                                                             |
+| `labelProps`       | `React.LabelHTMLAttributes<HTMLLabelElement> & { [key: string]: unknown; }`                                                        | —       | Props for the label element. An explicit `htmlFor` here overrides the automatic association (no id is generated then).                                                                          |
+| `horizontal`       | `boolean`                                                                                                                          | `false` | Horizontal field layout.                                                                                                                                                                        |
+| `isLoading`        | `boolean`                                                                                                                          | `false` | Shows loading indicator on the wrapping Control.                                                                                                                                                |
+| `controlSize`      | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Control size.                                                                                                                                                                                   |
+| `message`          | `React.ReactNode`                                                                                                                  | —       | Help/validation message below the textarea.                                                                                                                                                     |
+| `messageColor`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`                                                    | —       | Bulma color for the message.                                                                                                                                                                    |
+| `fieldClassName`   | `string`                                                                                                                           | —       | Additional CSS classes for the Field.                                                                                                                                                           |
+| `controlClassName` | `string`                                                                                                                           | —       | Additional CSS classes for the Control.                                                                                                                                                         |
+| `color`            | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'` | —       | Bulma color modifier for the textarea.                                                                                                                                                          |
+| `size`             | `'small'` \| `'medium'` \| `'large'`                                                                                               | —       | Size modifier for the textarea.                                                                                                                                                                 |
+| `isRounded`        | `boolean`                                                                                                                          | `false` | Rounded textarea corners.                                                                                                                                                                       |
+| `isStatic`         | `boolean`                                                                                                                          | `false` | Renders textarea as static (styled readonly).                                                                                                                                                   |
+| `isHovered`        | `boolean`                                                                                                                          | `false` | Applies hovered state.                                                                                                                                                                          |
+| `isFocused`        | `boolean`                                                                                                                          | `false` | Applies focused state.                                                                                                                                                                          |
+| `isActive`         | `boolean`                                                                                                                          | `false` | Applies Bulma's is-active modifier.                                                                                                                                                             |
+| `hasFixedSize`     | `boolean`                                                                                                                          | `false` | Fixed textarea size (no resize).                                                                                                                                                                |
+| `className`        | `string`                                                                                                                           | —       | Additional CSS classes to apply.                                                                                                                                                                |
+| `disabled`         | `boolean`                                                                                                                          | `false` | Disables the textarea.                                                                                                                                                                          |
+| `readOnly`         | `boolean`                                                                                                                          | `false` | Read-only textarea.                                                                                                                                                                             |
+| `rows`             | `number`                                                                                                                           | —       | Number of visible text lines.                                                                                                                                                                   |
+| `ref`              | `React.Ref<HTMLTextAreaElement>`                                                                                                   | —       | Forwarded to the underlying element.                                                                                                                                                            |
+| `...`              | All standard `<textarea>` attributes and Bulma helper props                                                                        | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                               |
 
 <!-- /bestax:generated props -->
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7930541b9..1ce013532 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,7 @@ overrides:
   yaml@2: '>=2.8.3'
   js-yaml@3: '>=3.15.1 <4'
   js-yaml@4: '>=4.3.1 <5'
+  nanoid@3: '>=3.3.17 <4'
 
 importers:
 
@@ -7579,8 +7580,8 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  nanoid@3.3.16:
-    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
+  nanoid@3.3.17:
+    resolution: {integrity: sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -19332,7 +19333,7 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nanoid@3.3.16: {}
+  nanoid@3.3.17: {}
 
   napi-postinstall@0.3.4: {}
 
@@ -20260,7 +20261,7 @@ snapshots:
 
   postcss@8.5.21:
     dependencies:
-      nanoid: 3.3.16
+      nanoid: 3.3.17
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 5773cd252..9553425d9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -101,6 +101,30 @@ overrides:
   # its line resolves to >=3.15.1 / >=4.3.1 without the force.
   'js-yaml@3': '>=3.15.1 <4'
   'js-yaml@4': '>=4.3.1 <5'
+  # Force patched nanoid under the vite>postcss chain (storybook build
+  # tooling) — high advisory GHSA-2v37-7h3g-55p8: custom generators can loop
+  # indefinitely when size is zero. The patched 3.3.17 (2026-08-03) clears the
+  # cooldown and postcss's ^3.3.16 admits it — the lockfile just predates it.
+  # Scoped to the 3.x major (the only copy in the tree; the 4.x/5.x line has
+  # its own patch at 5.1.6 if a consumer ever appears). Prune once the chain
+  # resolves to >=3.3.17 without the force.
+  'nanoid@3': '>=3.3.17 <4'
+
+# --- Audit exceptions (no patched release exists) ---
+
+# image-size <=2.0.2 carries two high DoS advisories (infinite loops in the
+# ICNS, JXL, and HEIF parsers): GHSA-w3rx-r6r6-pgpr and GHSA-5p2g-fcmc-qvqq.
+# GitHub lists no patched release for either (`first_patched_version: null`;
+# the ">=2.0.3" in audit output is unpublished) and npm's latest is still
+# 2.0.2, so there is no version an override could force. Exposure is confined
+# to the docs build: Docusaurus's mdx-loader sizes images from this repo's own
+# tree, never untrusted input. Remove both entries and re-run
+# `pnpm audit --audit-level=high` once a patched image-size publishes and the
+# Docusaurus chain resolves to it.
+auditConfig:
+  ignoreGhsas:
+    - GHSA-w3rx-r6r6-pgpr
+    - GHSA-5p2g-fcmc-qvqq
 
 # Strict, symlinked node_modules prevents phantom dependencies (using packages
 # we never declared). Narrow public hoists only for tooling that needs a flat
diff --git a/skills/bestax-form/SKILL.md b/skills/bestax-form/SKILL.md
index 04ab74dde..8f2d88f2e 100644
--- a/skills/bestax-form/SKILL.md
+++ b/skills/bestax-form/SKILL.md
@@ -100,18 +100,18 @@ All import from `@allxsmith/bestax-bulma`. Convenience components auto-wrap Fiel
 
 Across the convenience inputs (`Input`, `Select`, `TextArea`, and similar):
 
-| Prop                             | Type                                                                  | Purpose                                                          |
-| -------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| `color`                          | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | Visual state — use `'danger'` for errors, `'success'` for valid. |
-| `size`                           | `'small' \| 'medium' \| 'large'`                                      | Input size.                                                      |
-| `value` / `onChange`             | controlled value + handler                                            | Standard React controlled inputs.                                |
-| `defaultValue`                   | uncontrolled initial value                                            | When not controlling state.                                      |
-| `disabled`, `readOnly`           | `boolean`                                                             | Native states (`readOnly` on `*Base`).                           |
-| `label`                          | `ReactNode`                                                           | Field label (convenience components).                            |
-| `message`                        | `ReactNode`                                                           | Help / validation text rendered as `<p class="help">`.           |
-| `messageColor`                   | a Bulma color                                                         | Colors the help text (`'danger'` for errors).                    |
-| `iconLeftName` / `iconRightName` | `string`                                                              | Icon shortcuts; pair with `hasIconsLeft/Right`.                  |
-| `isLoading`                      | `boolean`                                                             | Loading indicator on the Control.                                |
+| Prop                             | Type                                                                  | Purpose                                                              |
+| -------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `color`                          | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | Visual state — use `'danger'` for errors, `'success'` for valid.     |
+| `size`                           | `'small' \| 'medium' \| 'large'`                                      | Input size.                                                          |
+| `value` / `onChange`             | controlled value + handler                                            | Standard React controlled inputs.                                    |
+| `defaultValue`                   | uncontrolled initial value                                            | When not controlling state.                                          |
+| `disabled`, `readOnly`           | `boolean`                                                             | Native states (`readOnly` on `*Base`).                               |
+| `label`                          | `ReactNode`                                                           | Field label (convenience components; auto-associated via `htmlFor`). |
+| `message`                        | `ReactNode`                                                           | Help / validation text rendered as `<p class="help">`.               |
+| `messageColor`                   | a Bulma color                                                         | Colors the help text (`'danger'` for errors).                        |
+| `iconLeftName` / `iconRightName` | `string`                                                              | Icon shortcuts; pair with `hasIconsLeft/Right`.                      |
+| `isLoading`                      | `boolean`                                                             | Loading indicator on the Control.                                    |
 
 Plus the full Bulma **helper props** (`m`, `p`, `textColor`, `display`, …) on every component
 via `useBulmaClasses`.
@@ -119,9 +119,15 @@ via `useBulmaClasses`.
 ⚠️ Full-width casing is inconsistent across the library: `Select`, `File`, and `Table` take
 `isFullwidth` (lowercase w); `Button` alone takes `isFullWidth`; `Tabs` takes bare `fullwidth`.
 
-⚠️ The `label` prop renders the `<label>` but does **not** wire `htmlFor`/`id` — assistive tech
-gets no association. Pass `id` on the input plus `labelProps={{ htmlFor: sameId }}` (every
-convenience input and `Field` accept `labelProps`).
+The `label` prop on the single-control convenience inputs (`Input`, `Select`, `TextArea`,
+`File`, `Numberinput`, `Slider`, `DateInput`, `TimeInput`, `DateTimeInput`) wires
+`htmlFor`/`id` automatically — your `id` is used when provided, a generated one otherwise,
+and an explicit `labelProps={{ htmlFor }}` wins. The wiring only happens when the component
+renders its own `Field` (nested inside one, the `label` prop is dropped), and the date/time
+pickers skip it in `inline` mode (no visible input to label). ⚠️ Manual wiring is still
+required when composing `Field` + bases yourself (`Field`'s own `label` associates nothing)
+and on the group/composite inputs (`Checkboxes`, `Radios`, `Autocomplete`, `Rate`,
+`Taginput`).
 
 ## Convenience vs composed
 
@@ -168,8 +174,6 @@ function SignupForm() {
         message={error}
         messageColor={error ? 'danger' : undefined}
         iconLeftName="envelope"
-        id="signup-email"
-        labelProps={{ htmlFor: 'signup-email' }}
       />
       <Button color="primary" type="submit" mt="3">
         Sign up
@@ -213,8 +217,9 @@ for the expected classes/states, and say plainly that the visual pass is still o
 ## Checklist
 
 - [ ] Built from the shipped form components (no hand-rolled inputs / reinvented controls).
-- [ ] Every label is programmatically associated: `label` prop + `id` on the input +
-      `labelProps={{ htmlFor }}`, or a `<label htmlFor>` when composing.
+- [ ] Every label is programmatically associated — the convenience `label` prop does this
+      automatically; when composing `Field` + bases (or labeling a group input), pass
+      `labelProps={{ htmlFor }}` / a `<label htmlFor>` plus a matching `id` yourself.
 - [ ] Controlled inputs have both `value` and `onChange` (or use `defaultValue` uncontrolled).
 - [ ] Error state shows via `color="danger"` + `message` + `messageColor="danger"`.
 - [ ] Grouped/addon layouts use explicit `Field` + `Control` composition.
diff --git a/skills/bestax-form/references/api.md b/skills/bestax-form/references/api.md
index 45b020924..0a59763dc 100644
--- a/skills/bestax-form/references/api.md
+++ b/skills/bestax-form/references/api.md
@@ -8,16 +8,16 @@ via `useBulmaClasses`.
 
 Container and layout. Compound parts: `Field.Label`, `Field.Body`.
 
-| Prop                    | Type                                              | Notes                                                              |
-| ----------------------- | ------------------------------------------------- | ------------------------------------------------------------------ |
-| `horizontal`            | `boolean`                                         | Label + control side by side. Auto-wraps children in `Field.Body`. |
-| `grouped`               | `boolean \| 'centered' \| 'right' \| 'multiline'` | Controls in a row.                                                 |
-| `hasAddons`             | `boolean \| 'centered' \| 'right'`                | Attached controls.                                                 |
-| `narrow`                | `boolean`                                         | Constrain to content width (inside horizontal bodies).             |
-| `label`                 | `ReactNode`                                       | Convenience label.                                                 |
-| `labelSize`             | `'small' \| 'normal' \| 'medium' \| 'large'`      | Label size.                                                        |
-| `labelProps`            | label attributes                                  | Props for the `<label>` — where `htmlFor` goes.                    |
-| `textColor` / `bgColor` | Bulma color                                       | Helper colors for the field.                                       |
+| Prop                    | Type                                              | Notes                                                                                                                                                                         |
+| ----------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `horizontal`            | `boolean`                                         | Label + control side by side. Auto-wraps children in `Field.Body`.                                                                                                            |
+| `grouped`               | `boolean \| 'centered' \| 'right' \| 'multiline'` | Controls in a row.                                                                                                                                                            |
+| `hasAddons`             | `boolean \| 'centered' \| 'right'`                | Attached controls.                                                                                                                                                            |
+| `narrow`                | `boolean`                                         | Constrain to content width (inside horizontal bodies).                                                                                                                        |
+| `label`                 | `ReactNode`                                       | Convenience label.                                                                                                                                                            |
+| `labelSize`             | `'small' \| 'normal' \| 'medium' \| 'large'`      | Label size.                                                                                                                                                                   |
+| `labelProps`            | label attributes                                  | Props for the `<label>` — where `htmlFor` goes when composing; the convenience inputs set it automatically when they render their own `Field` (except `inline` picker modes). |
+| `textColor` / `bgColor` | Bulma color                                       | Helper colors for the field.                                                                                                                                                  |
 
 ## Control — `form/Control.tsx`