@charpente-ui/vue 2.0.0 → 2.1.0

package/README.md

@@ -51,25 +51,36 @@ npm run dev
 ```vue
 <script setup>
     import { ref } from 'vue';
-    import { CInput, CButton, CLabel } from '@charpente-ui/vue';
+    import { CForm, CField, CLabel, CInput, CSupportingText, CButton } from '@charpente-ui/vue';
 
     const email = ref('');
+
+    function onSubmit() {
+        // Only called once the form passes native validation.
+    }
 </script>
 
 <template>
-    <div class="form-group">
-        <CLabel for="email-field">Email Address</CLabel>
+    <CForm validate @submit="onSubmit">
+        <CField class="form-group">
+            <CLabel>Email Address</CLabel>
+
+            <CInput v-model="email" type="email" placeholder="hello@world.com" required
+                    class="my-custom-input-style"/>
 
-        <CInput id="email-field" v-model="email" type="email" placeholder="hello@world.com"
-                class="my-custom-input-style"/>
+            <CSupportingText validation>We never share your email.</CSupportingText>
+        </CField>
 
-        <CButton @click="submit" class="btn-primary">
+        <CButton type="submit" class="btn-primary">
             Subscribe
         </CButton>
-    </div>
+    </CForm>
 </template>
 ```
 
+No `for`/`id` wiring, no validation library: the label, the hint and the browser-localized error messages are linked
+and accessible automatically — and every class lands on the native element, ready for your CSS.
+
 ## Component Reference
 
 1. **Form Inputs** **(CInput, CTextarea, CSelect)**
@@ -169,9 +180,36 @@ avoid accidental form submissions. Pass `type="submit"` explicitly for submit bu
 </CField>
 ```
 
-An explicit `id` on the input or `for` on the label always wins over the field id. A `CField` wrapping a whole
-group is ignored by the items (a single id must not land on every input); wrap each item in its own `CField`
-instead:
+`CSupportingText` renders a field's hint or error text inside a `CField`: the input automatically gets an
+`aria-describedby` pointing to it, and the attribute is removed when the text unmounts (e.g. behind a `v-if`).
+
+```vue
+<CField>
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email"/>
+    <CSupportingText v-if="error">{{ error }}</CSupportingText>
+</CField>
+```
+
+An explicit `aria-describedby` on the input always wins, and a standalone `CSupportingText` (outside a field)
+simply renders its content with an id. Likewise, an explicit `id` on the input or `for` on the label always wins
+over the field id.
+
+Passing `id` to `CField` itself names that pairing instead of the wrapper `<div>` — reusing it on both would put
+the same id on two different DOM elements:
+
+```vue
+<CField id="email-field">
+    <CLabel>Email</CLabel>
+    <CInput v-model="email" type="email"/>
+</CField>
+```
+
+Renders `<label for="email-field">` and `<input id="email-field">`; the `<div>` itself gets no `id`. Use `class`
+to target the wrapper.
+
+A `CField` wrapping a whole group is ignored by the items (a single id must not land on every input); wrap each
+item in its own `CField` instead:
 
 ```vue
 <CRadioGroup v-model="selected">
@@ -187,6 +225,29 @@ instead:
 </CRadioGroup>
 ```
 
+6. **Native Validation** _(CForm + CField + CSupportingText)_
+
+Browsers already validate forms (`required`, `type="email"`, `minlength`, `pattern`…) and localize their error
+messages for free. Charpente UI exposes that instead of reinventing it — opt in with the `validate` prop:
+
+```vue
+<CForm validate @submit="onSubmit">
+    <CField>
+        <CLabel>Email</CLabel>
+        <CInput v-model="email" type="email" required/>
+        <CSupportingText validation>We never share your email.</CSupportingText>
+    </CField>
+</CForm>
+```
+
+- `CForm validate` suppresses the native bubbles (`novalidate`), blocks `submit` until the form is valid, and
+  focuses the first invalid control.
+- Errors appear after the first submit attempt, then update live as the user fixes the value.
+- `CSupportingText validation` shows the browser's localized `validationMessage` while invalid, and falls back to
+  its slot content otherwise. The control also gets `aria-invalid` automatically.
+- Without `validate`, nothing changes — bring your own validation library if you need cross-field or async rules.
+  Native escapes still work: `formnovalidate` on a submit button skips validation for that button.
+
 ## Components
 
 | Name          | Core Logic                                                                       | Tag              | Status |
@@ -196,12 +257,13 @@ instead:
 | CheckboxGroup | **Group:** Shared v-model and name across checkboxes inside a fieldset.          | `CCheckboxGroup` | Ready  |
 | Field         | **Wrapper:** Auto-links a label and an input via a shared generated id.          | `CField`         | Ready  |
 | File          | **File Input:** Reactive file selection with `v-model` support.                  | `CFile`          | Ready  |
-| Form          | **Auto-Submit:** Integrated `preventDefault` and event handling.                 | `CForm`          | Ready  |
+| Form          | **Auto-Submit:** `preventDefault` handling and opt-in native validation.         | `CForm`          | Ready  |
 | Input         | **Auto-ID:** Auto-links to labels via `useId()` and full attributes inheritance. | `CInput`         | Ready  |
 | Label         | **Context-Aware:** Simple, accessible binding for any input.                     | `CLabel`         | Ready  |
 | Radio         | **Selection:** Minimalist wrapper for native radio input.                        | `CRadio`         | Ready  |
 | RadioGroup    | **Group:** Shared v-model and name across radios inside a fieldset.              | `CRadioGroup`    | Ready  |
 | Select        | **Native Wrapper:** Single and multiple selection support.                       | `CSelect`        | Ready  |
+| SupportingText | **Field Text:** Hint or error text wired to its input via `aria-describedby`.   | `CSupportingText` | Ready  |
 | Textarea      | **Flexible Binding:** Auto-ID and reactive model management.                     | `CTextarea`      | Ready  |
 
 ## Wrapping Components
@@ -211,7 +273,7 @@ When wrapping a Charpente UI component inside your own, you must forward `$attrs
 
 ```vue
 <script setup>
-import { CSelect } from '@charpente-ui/vue';
+import { CField, CLabel, CSelect, CSupportingText } from '@charpente-ui/vue';
 
 defineOptions({
     inheritAttrs: false
@@ -226,20 +288,21 @@ const model = defineModel();
 </script>
 
 <template>
-    <div>
-        <label>{{ label }}</label>
+    <CField>
+        <CLabel>{{ label }}</CLabel>
 
         <CSelect v-bind="$attrs" v-model="model">
             <slot/>
         </CSelect>
 
-        <span v-if="error">{{ error }}</span>
-    </div>
+        <CSupportingText v-if="error">{{ error }}</CSupportingText>
+    </CField>
 </template>
 ```
 
 **Why this matters:** Without `inheritAttrs: false`, Vue applies fallthrough attributes to the wrapper's root element
-(`<div>`) instead of the inner component. Adding `v-bind="$attrs"` on the Charpente component ensures attributes like
-`id`, `class`, `required`, or `disabled` pass all the way through to the native HTML element.
+instead of the inner component. Adding `v-bind="$attrs"` on the Charpente component ensures attributes like `id`,
+`class`, `required`, or `disabled` pass all the way through to the native HTML element. And since `CField` works by
+provide/inject, the label, select and error stay linked across your wrapper's boundary — accessibility included.
 
 This pattern works the same way for all Charpente components (`CInput`, `CCheckbox`, `CRadio`, etc.).

package/dist/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.js

@@ -1,11 +1,14 @@
-import { checkboxGroupKey as e, fieldKey as t } from "./internal/keys.js";
-import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useId as f, useModel as p, useTemplateRef as m, vModelCheckbox as h, watchPostEffect as g, withDirectives as _ } from "vue";
+import { checkboxGroupKey as e } from "./internal/keys.js";
+import { useFieldControl as t } from "./internal/field.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useModel as f, useTemplateRef as p, vModelCheckbox as m, watchPostEffect as h, withDirectives as g } from "vue";
 //#region src/components/BaseCheckbox.vue?vue&type=script&setup=true&lang.ts
-var v = [
+var _ = [
 	"id",
+	"aria-describedby",
+	"aria-invalid",
 	"name",
 	"value"
-], y = /* @__PURE__ */ i({
+], v = /* @__PURE__ */ i({
 	inheritAttrs: !1,
 	__name: "BaseCheckbox",
 	props: /* @__PURE__ */ s({
@@ -17,19 +20,21 @@ var v = [
 	}),
 	emits: ["update:modelValue"],
 	setup(i) {
-		let s = i, y = p(i, "modelValue"), b = a(e, null), x = b ? b.model : y, S = d(), C = f(), w = m("input"), T = a(t, null), E = n(() => typeof S.id == "string" ? S.id : T?.id.value ?? C), D = n(() => typeof S.name == "string" ? S.name : b?.name.value);
-		return g(() => {
+		let s = i, v = f(i, "modelValue"), y = a(e, null), b = y ? y.model : v, x = d(), S = p("input"), { controlId: C, describedBy: w, ariaInvalid: T } = t(), E = n(() => typeof x.name == "string" ? x.name : y?.name.value);
+		return h(() => {
 			/* v8 ignore next 2 */
-			w.value && (w.value.indeterminate = !!s.indeterminate);
-		}), (e, t) => _((l(), r("input", c(e.$attrs, {
-			id: E.value,
+			S.value && (S.value.indeterminate = !!s.indeterminate);
+		}), (e, t) => g((l(), r("input", c(e.$attrs, {
+			id: u(C),
 			ref: "input",
-			"onUpdate:modelValue": t[0] ||= (e) => o(x) ? x.value = e : null,
-			name: D.value,
+			"onUpdate:modelValue": t[0] ||= (e) => o(b) ? b.value = e : null,
+			"aria-describedby": u(w),
+			"aria-invalid": u(T),
+			name: E.value,
 			type: "checkbox",
 			value: i.value
-		}), null, 16, v)), [[h, u(x)]]);
+		}), null, 16, _)), [[m, u(b)]]);
 	}
 });
 //#endregion
-export { y as default };
+export { v as default };

package/dist/components/BaseField.vue?vue&type=script&setup=true&lang.js

@@ -1,13 +1,31 @@
 import { fieldKey as e } from "./internal/keys.js";
-import { computed as t, createElementBlock as n, defineComponent as r, guardReactiveProps as i, normalizeProps as a, openBlock as o, provide as s, renderSlot as c, useId as l } from "vue";
+import { computed as t, createElementBlock as n, defineComponent as r, mergeProps as i, openBlock as a, provide as o, ref as s, renderSlot as c, useAttrs as l, useId as u } from "vue";
 //#region src/components/BaseField.vue?vue&type=script&setup=true&lang.ts
-var u = /* @__PURE__ */ r({
+var d = /* @__PURE__ */ r({
 	inheritAttrs: !1,
 	__name: "BaseField",
 	setup(r) {
-		let u = l();
-		return s(e, { id: t(() => u) }), (e, t) => (o(), n("div", a(i(e.$attrs)), [c(e.$slots, "default")], 16));
+		let d = l(), f = u(), p = s(), m = s(""), h = s(!1), g = t(() => typeof d.id == "string" ? d.id : f), _ = t(() => {
+			let e = { ...d };
+			return delete e.id, e;
+		});
+		o(e, {
+			id: g,
+			supportingTextId: p,
+			validationMessage: m
+		});
+		function v(e) {
+			h.value = !0, m.value = e.target.validationMessage;
+		}
+		function y(e) {
+			h.value && (m.value = e.target.validationMessage);
+		}
+		return (e, t) => (a(), n("div", i(_.value, {
+			onInvalidCapture: v,
+			onInputCapture: y,
+			onChangeCapture: y
+		}), [c(e.$slots, "default")], 16));
 	}
 });
 //#endregion
-export { u as default };
+export { d as default };

package/dist/components/BaseFile.vue?vue&type=script&setup=true&lang.js

@@ -1,7 +1,11 @@
-import { fieldKey as e } from "./internal/keys.js";
-import { computed as t, createElementBlock as n, defineComponent as r, inject as i, mergeProps as a, openBlock as o, useAttrs as s, useId as c, useModel as l, useTemplateRef as u, watch as d } from "vue";
+import { useFieldControl as e } from "./internal/field.js";
+import { createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, unref as a, useModel as o, useTemplateRef as s, watch as c } from "vue";
 //#region src/components/BaseFile.vue?vue&type=script&setup=true&lang.ts
-var f = ["id"], p = /* @__PURE__ */ r({
+var l = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], u = /* @__PURE__ */ n({
 	inheritAttrs: !1,
 	__name: "BaseFile",
 	props: {
@@ -9,20 +13,22 @@ var f = ["id"], p = /* @__PURE__ */ r({
 		modelModifiers: {}
 	},
 	emits: ["update:modelValue"],
-	setup(r) {
-		let p = l(r, "modelValue"), m = s(), h = c(), g = u("input"), _ = i(e, null), v = t(() => typeof m.id == "string" ? m.id : _?.id.value ?? h);
-		function y(e) {
-			p.value = e.target.files;
+	setup(n) {
+		let u = o(n, "modelValue"), d = s("input"), { controlId: f, describedBy: p, ariaInvalid: m } = e();
+		function h(e) {
+			u.value = e.target.files;
 		}
-		return d(p, (e) => {
-			!e && g.value && (g.value.value = "");
-		}), (e, t) => (o(), n("input", a(e.$attrs, {
-			id: v.value,
+		return c(u, (e) => {
+			!e && d.value && (d.value.value = "");
+		}), (e, n) => (i(), t("input", r(e.$attrs, {
+			id: a(f),
 			ref: "input",
+			"aria-describedby": a(p),
+			"aria-invalid": a(m),
 			type: "file",
-			onChange: y
-		}), null, 16, f));
+			onChange: h
+		}), null, 16, l));
 	}
 });
 //#endregion
-export { p as default };
+export { u as default };

package/dist/components/BaseForm.d.ts

@@ -1,3 +1,6 @@
+type __VLS_Props = {
+    validate?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,11 +10,11 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     submit: (event: SubmitEvent) => any;
-}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: SubmitEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/BaseForm.vue?vue&type=script&setup=true&lang.js

@@ -1,14 +1,33 @@
 import { computed as e, createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, useAttrs as o, useId as s, withModifiers as c } from "vue";
 //#region src/components/BaseForm.vue?vue&type=script&setup=true&lang.ts
-var l = ["id"], u = /* @__PURE__ */ n({
+var l = ["id", "novalidate"], u = /* @__PURE__ */ n({
 	inheritAttrs: !1,
 	__name: "BaseForm",
+	props: { validate: { type: Boolean } },
 	emits: ["submit"],
 	setup(n, { emit: u }) {
-		let d = o(), f = s(), p = u, m = e(() => typeof d.id == "string" ? d.id : f);
-		return (e, n) => (i(), t("form", r(e.$attrs, {
-			id: m.value,
-			onSubmit: n[0] ||= c((e) => p("submit", e), ["prevent"])
+		let d = n, f = o(), p = s(), m = u, h = e(() => typeof f.id == "string" ? f.id : p);
+		function g(e) {
+			let t = e.target;
+			if (d.validate && !t.checkValidity()) {
+				_(t);
+				return;
+			}
+			m("submit", e);
+		}
+		function _(e) {
+			for (let t of Array.from(e.elements)) {
+				let e = t;
+				if (e.willValidate && !e.validity.valid) {
+					e.focus();
+					break;
+				}
+			}
+		}
+		return (e, o) => (i(), t("form", r(e.$attrs, {
+			id: h.value,
+			novalidate: n.validate || void 0,
+			onSubmit: c(g, ["prevent"])
 		}), [a(e.$slots, "default")], 16, l));
 	}
 });

package/dist/components/BaseInput.vue?vue&type=script&setup=true&lang.js

@@ -1,8 +1,16 @@
-import { fieldKey as e } from "./internal/keys.js";
+import { useFieldControl as e } from "./internal/field.js";
 import { applyModelModifiers as t } from "./internal/modifiers.js";
-import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeProps as s, openBlock as c, unref as l, useAttrs as u, useId as d, useModel as f, vModelDynamic as p, withDirectives as m } from "vue";
+import { createElementBlock as n, defineComponent as r, isRef as i, mergeProps as a, openBlock as o, unref as s, useModel as c, vModelDynamic as l, withDirectives as u } from "vue";
 //#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
-var h = ["id"], g = ["id"], _ = /* @__PURE__ */ i({
+var d = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], f = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], p = /* @__PURE__ */ r({
 	inheritAttrs: !1,
 	__name: "BaseInput",
 	props: {
@@ -10,21 +18,25 @@ var h = ["id"], g = ["id"], _ = /* @__PURE__ */ i({
 		modelModifiers: {}
 	},
 	emits: ["update:modelValue"],
-	setup(i) {
-		let [_, v] = f(i, "modelValue", { set: (e) => t(e, v) }), y = u(), b = d(), x = a(e, null), S = n(() => typeof y.id == "string" ? y.id : x?.id.value ?? b);
-		return (e, t) => l(v).lazy ? m((c(), r("input", s({ key: 0 }, e.$attrs, {
-			id: S.value,
-			"onUpdate:modelValue": t[0] ||= (e) => o(_) ? _.value = e : null
-		}), null, 16, h)), [[
-			p,
-			l(_),
+	setup(r) {
+		let [p, m] = c(r, "modelValue", { set: (e) => t(e, m) }), { controlId: h, describedBy: g, ariaInvalid: _ } = e();
+		return (e, t) => s(m).lazy ? u((o(), n("input", a({ key: 0 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[0] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, d)), [[
+			l,
+			s(p),
 			void 0,
 			{ lazy: !0 }
-		]]) : m((c(), r("input", s({ key: 1 }, e.$attrs, {
-			id: S.value,
-			"onUpdate:modelValue": t[1] ||= (e) => o(_) ? _.value = e : null
-		}), null, 16, g)), [[p, l(_)]]);
+		]]) : u((o(), n("input", a({ key: 1 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[1] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, f)), [[l, s(p)]]);
 	}
 });
 //#endregion
-export { _ as default };
+export { p as default };

package/dist/components/BaseRadio.vue?vue&type=script&setup=true&lang.js

@@ -1,11 +1,14 @@
-import { fieldKey as e, radioGroupKey as t } from "./internal/keys.js";
-import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useId as f, useModel as p, vModelRadio as m, withDirectives as h } from "vue";
+import { radioGroupKey as e } from "./internal/keys.js";
+import { useFieldControl as t } from "./internal/field.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeModels as s, mergeProps as c, openBlock as l, unref as u, useAttrs as d, useModel as f, vModelRadio as p, withDirectives as m } from "vue";
 //#region src/components/BaseRadio.vue?vue&type=script&setup=true&lang.ts
-var g = [
+var h = [
 	"id",
+	"aria-describedby",
+	"aria-invalid",
 	"name",
 	"value"
-], _ = /* @__PURE__ */ i({
+], g = /* @__PURE__ */ i({
 	inheritAttrs: !1,
 	__name: "BaseRadio",
 	props: /* @__PURE__ */ s({ value: {} }, {
@@ -14,15 +17,17 @@ var g = [
 	}),
 	emits: ["update:modelValue"],
 	setup(i) {
-		let s = p(i, "modelValue"), _ = a(t, null), v = _ ? _.model : s, y = d(), b = f(), x = a(e, null), S = n(() => typeof y.id == "string" ? y.id : x?.id.value ?? b), C = n(() => typeof y.name == "string" ? y.name : _?.name.value);
-		return (e, t) => h((l(), r("input", c(e.$attrs, {
-			id: S.value,
-			"onUpdate:modelValue": t[0] ||= (e) => o(v) ? v.value = e : null,
-			name: C.value,
+		let s = f(i, "modelValue"), g = a(e, null), _ = g ? g.model : s, v = d(), { controlId: y, describedBy: b, ariaInvalid: x } = t(), S = n(() => typeof v.name == "string" ? v.name : g?.name.value);
+		return (e, t) => m((l(), r("input", c(e.$attrs, {
+			id: u(y),
+			"onUpdate:modelValue": t[0] ||= (e) => o(_) ? _.value = e : null,
+			"aria-describedby": u(b),
+			"aria-invalid": u(x),
+			name: S.value,
 			value: i.value,
 			type: "radio"
-		}), null, 16, g)), [[m, u(v)]]);
+		}), null, 16, h)), [[p, u(_)]]);
 	}
 });
 //#endregion
-export { _ as default };
+export { g as default };

package/dist/components/BaseSelect.vue?vue&type=script&setup=true&lang.js

@@ -1,7 +1,11 @@
-import { fieldKey as e } from "./internal/keys.js";
-import { computed as t, createElementBlock as n, defineComponent as r, inject as i, mergeProps as a, openBlock as o, renderSlot as s, useAttrs as c, useId as l, useModel as u, vModelSelect as d, withDirectives as f } from "vue";
+import { useFieldControl as e } from "./internal/field.js";
+import { createElementBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, unref as o, useModel as s, vModelSelect as c, withDirectives as l } from "vue";
 //#region src/components/BaseSelect.vue?vue&type=script&setup=true&lang.ts
-var p = ["id"], m = /* @__PURE__ */ r({
+var u = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], d = /* @__PURE__ */ n({
 	inheritAttrs: !1,
 	__name: "BaseSelect",
 	props: {
@@ -9,13 +13,15 @@ var p = ["id"], m = /* @__PURE__ */ r({
 		modelModifiers: {}
 	},
 	emits: ["update:modelValue"],
-	setup(r) {
-		let m = u(r, "modelValue"), h = c(), g = l(), _ = i(e, null), v = t(() => typeof h.id == "string" ? h.id : _?.id.value ?? g);
-		return (e, t) => f((o(), n("select", a(e.$attrs, {
-			id: v.value,
-			"onUpdate:modelValue": t[0] ||= (e) => m.value = e
-		}), [s(e.$slots, "default")], 16, p)), [[d, m.value]]);
+	setup(n) {
+		let d = s(n, "modelValue"), { controlId: f, describedBy: p, ariaInvalid: m } = e();
+		return (e, n) => l((i(), t("select", r(e.$attrs, {
+			id: o(f),
+			"onUpdate:modelValue": n[0] ||= (e) => d.value = e,
+			"aria-describedby": o(p),
+			"aria-invalid": o(m)
+		}), [a(e.$slots, "default")], 16, u)), [[c, d.value]]);
 	}
 });
 //#endregion
-export { m as default };
+export { d as default };

package/dist/components/BaseSupportingText.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    validation?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BaseSupportingText.js

@@ -0,0 +1,5 @@
+import e from "./BaseSupportingText.vue?vue&type=script&setup=true&lang.js";
+//#region src/components/BaseSupportingText.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/BaseSupportingText.vue?vue&type=script&setup=true&lang.js

@@ -0,0 +1,18 @@
+import { fieldKey as e } from "./internal/keys.js";
+import { Fragment as t, computed as n, createElementBlock as r, createTextVNode as i, defineComponent as a, inject as o, mergeProps as s, onBeforeUnmount as c, openBlock as l, renderSlot as u, toDisplayString as d, useAttrs as f, useId as p, watchEffect as m } from "vue";
+//#region src/components/BaseSupportingText.vue?vue&type=script&setup=true&lang.ts
+var h = ["id"], g = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "BaseSupportingText",
+	props: { validation: { type: Boolean } },
+	setup(a) {
+		let g = a, _ = f(), v = p(), y = o(e, null), b = n(() => typeof _.id == "string" ? _.id : v), x = n(() => g.validation ? y?.validationMessage.value ?? "" : "");
+		return m(() => {
+			y && (y.supportingTextId.value = b.value);
+		}), c(() => {
+			y && (y.supportingTextId.value = void 0);
+		}), (e, n) => (l(), r("p", s(e.$attrs, { id: b.value }), [x.value ? (l(), r(t, { key: 0 }, [i(d(x.value), 1)], 64)) : u(e.$slots, "default", { key: 1 })], 16, h));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/BaseTextarea.vue?vue&type=script&setup=true&lang.js

@@ -1,8 +1,16 @@
-import { fieldKey as e } from "./internal/keys.js";
+import { useFieldControl as e } from "./internal/field.js";
 import { applyModelModifiers as t } from "./internal/modifiers.js";
-import { computed as n, createElementBlock as r, defineComponent as i, inject as a, isRef as o, mergeProps as s, openBlock as c, unref as l, useAttrs as u, useId as d, useModel as f, vModelText as p, withDirectives as m } from "vue";
+import { createElementBlock as n, defineComponent as r, isRef as i, mergeProps as a, openBlock as o, unref as s, useModel as c, vModelText as l, withDirectives as u } from "vue";
 //#region src/components/BaseTextarea.vue?vue&type=script&setup=true&lang.ts
-var h = ["id"], g = ["id"], _ = /* @__PURE__ */ i({
+var d = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], f = [
+	"id",
+	"aria-describedby",
+	"aria-invalid"
+], p = /* @__PURE__ */ r({
 	inheritAttrs: !1,
 	__name: "BaseTextarea",
 	props: {
@@ -10,21 +18,25 @@ var h = ["id"], g = ["id"], _ = /* @__PURE__ */ i({
 		modelModifiers: {}
 	},
 	emits: ["update:modelValue"],
-	setup(i) {
-		let [_, v] = f(i, "modelValue", { set: (e) => t(e, v) }), y = u(), b = d(), x = a(e, null), S = n(() => typeof y.id == "string" ? y.id : x?.id.value ?? b);
-		return (e, t) => l(v).lazy ? m((c(), r("textarea", s({ key: 0 }, e.$attrs, {
-			id: S.value,
-			"onUpdate:modelValue": t[0] ||= (e) => o(_) ? _.value = e : null
-		}), null, 16, h)), [[
-			p,
-			l(_),
+	setup(r) {
+		let [p, m] = c(r, "modelValue", { set: (e) => t(e, m) }), { controlId: h, describedBy: g, ariaInvalid: _ } = e();
+		return (e, t) => s(m).lazy ? u((o(), n("textarea", a({ key: 0 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[0] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, d)), [[
+			l,
+			s(p),
 			void 0,
 			{ lazy: !0 }
-		]]) : m((c(), r("textarea", s({ key: 1 }, e.$attrs, {
-			id: S.value,
-			"onUpdate:modelValue": t[1] ||= (e) => o(_) ? _.value = e : null
-		}), null, 16, g)), [[p, l(_)]]);
+		]]) : u((o(), n("textarea", a({ key: 1 }, e.$attrs, {
+			id: s(h),
+			"onUpdate:modelValue": t[1] ||= (e) => i(p) ? p.value = e : null,
+			"aria-describedby": s(g),
+			"aria-invalid": s(_)
+		}), null, 16, f)), [[l, s(p)]]);
 	}
 });
 //#endregion
-export { _ as default };
+export { p as default };

package/dist/components/internal/field.d.ts

@@ -0,0 +1,5 @@
+export declare function useFieldControl(): {
+    controlId: import('vue').ComputedRef<string>;
+    describedBy: import('vue').ComputedRef<string | undefined>;
+    ariaInvalid: import('vue').ComputedRef<unknown>;
+};

package/dist/components/internal/field.js

@@ -0,0 +1,13 @@
+import { fieldKey as e } from "./keys.js";
+import { computed as t, inject as n, useAttrs as r, useId as i } from "vue";
+//#region src/components/internal/field.ts
+function a() {
+	let a = r(), o = i(), s = n(e, null);
+	return {
+		controlId: t(() => typeof a.id == "string" ? a.id : s?.id.value ?? o),
+		describedBy: t(() => typeof a["aria-describedby"] == "string" ? a["aria-describedby"] : s?.supportingTextId.value),
+		ariaInvalid: t(() => "aria-invalid" in a ? a["aria-invalid"] : s?.validationMessage.value ? "true" : void 0)
+	};
+}
+//#endregion
+export { a as useFieldControl };

package/dist/components/internal/keys.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, ModelRef, ComputedRef } from 'vue';
+import { InjectionKey, ModelRef, ComputedRef, Ref } from 'vue';
 export interface RadioGroupContext {
     model: ModelRef<string | number | undefined>;
     name: ComputedRef<string>;
@@ -11,5 +11,7 @@ export interface CheckboxGroupContext {
 export declare const checkboxGroupKey: InjectionKey<CheckboxGroupContext>;
 export interface FieldContext {
     id: ComputedRef<string>;
+    supportingTextId: Ref<string | undefined>;
+    validationMessage: Ref<string>;
 }
 export declare const fieldKey: InjectionKey<FieldContext | null>;

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export { default as CLabel } from './components/BaseLabel';
 export { default as CRadio } from './components/BaseRadio';
 export { default as CRadioGroup } from './components/BaseRadioGroup';
 export { default as CSelect } from './components/BaseSelect';
+export { default as CSupportingText } from './components/BaseSupportingText';
 export { default as CTextarea } from './components/BaseTextarea';

package/dist/index.js

@@ -9,5 +9,6 @@ import s from "./components/BaseLabel.js";
 import c from "./components/BaseRadio.js";
 import l from "./components/BaseRadioGroup.js";
 import u from "./components/BaseSelect.js";
-import d from "./components/BaseTextarea.js";
-export { e as CButton, t as CCheckbox, n as CCheckboxGroup, r as CField, i as CFile, a as CForm, o as CInput, s as CLabel, c as CRadio, l as CRadioGroup, u as CSelect, d as CTextarea };
+import d from "./components/BaseSupportingText.js";
+import f from "./components/BaseTextarea.js";
+export { e as CButton, t as CCheckbox, n as CCheckboxGroup, r as CField, i as CFile, a as CForm, o as CInput, s as CLabel, c as CRadio, l as CRadioGroup, u as CSelect, d as CSupportingText, f as CTextarea };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@charpente-ui/vue",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "Charpente UI is a headless Vue component library.",
     "type": "module",
     "scripts": {