[pull] main from chakra-ui:main

packages/react/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+
+- **Field**: Add `data-required` attribute to Field.Label part
+
 ## [5.22.0] - 2025-08-28
 
 ### Added

packages/react/src/components/field/examples/custom-control.tsx

@@ -0,0 +1,12 @@
+import { Field } from '@ark-ui/react/field'
+
+export const CustomControl = () => {
+  return (
+    <Field.Root invalid>
+      <Field.Label>Any Control</Field.Label>
+      <Field.Context>{(field) => <input {...field.getInputProps()} />}</Field.Context>
+      <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
+      <Field.ErrorText>This field has an error</Field.ErrorText>
+    </Field.Root>
+  )
+}

packages/react/src/components/field/field.stories.tsx

@@ -6,7 +6,6 @@ const meta: Meta = {
 
 export default meta
 
-export { Disabled } from './examples/disabled'
 export { Input } from './examples/input'
 export { Invalid } from './examples/invalid'
 export { RequiredIndicator } from './examples/required-indicator'
@@ -15,3 +14,5 @@ export { Select } from './examples/select'
 export { ShadowDom } from './examples/shadow-dom'
 export { Textarea } from './examples/textarea'
 export { TextareaAutoresize } from './examples/textarea-autoresize'
+export { Disabled } from './examples/disabled'
+export { CustomControl } from './examples/custom-control'

packages/react/src/components/field/use-field.ts

@@ -109,9 +109,10 @@ export const useField = (props: UseFieldProps = {}) => {
         'data-disabled': dataAttr(disabled),
         'data-invalid': dataAttr(invalid),
         'data-readonly': dataAttr(readOnly),
+        'data-required': dataAttr(required),
         htmlFor: id,
       }) as HTMLProps<'label'>,
-    [disabled, invalid, readOnly, id, labelId],
+    [disabled, invalid, readOnly, required, id, labelId],
   )
 
   const getControlProps = useMemo(

packages/solid/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+
+- **Field**: Add `data-required` attribute to Field.Label part
+
 ## [5.22.0] - 2025-08-28
 
 ### Added

packages/solid/src/components/field/examples/custom-control.tsx

@@ -0,0 +1,12 @@
+import { Field } from '@ark-ui/solid/field'
+
+export const CustomControl = () => {
+  return (
+    <Field.Root invalid>
+      <Field.Label>Any Control</Field.Label>
+      <Field.Context>{(field) => <input {...field().getInputProps()} />}</Field.Context>
+      <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
+      <Field.ErrorText>This field has an error</Field.ErrorText>
+    </Field.Root>
+  )
+}

packages/solid/src/components/field/field.stories.tsx

@@ -12,3 +12,4 @@ export { Select } from './examples/select'
 export { Textarea } from './examples/textarea'
 export { TextareaAutoresize } from './examples/textarea-autoresize'
 export { Disabled } from './examples/disabled'
+export { CustomControl } from './examples/custom-control'

packages/solid/src/components/field/use-field.ts

@@ -97,6 +97,7 @@ export const useField = (props?: MaybeAccessor<UseFieldProps>) => {
     'data-disabled': dataAttr(fieldProps.disabled),
     'data-invalid': dataAttr(fieldProps.invalid),
     'data-readonly': dataAttr(fieldProps.readOnly),
+    'data-required': dataAttr(fieldProps.required),
     htmlFor: id,
   })
 

packages/svelte/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
+- **Field**: Add `data-required` attribute to Field.Label part
+
 ## [5.7.0] - 2025-08-28
 
 ### Added

packages/svelte/src/lib/components/field/examples/custom-control.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Field } from '@ark-ui/svelte/field'
+</script>
+
+<Field.Root invalid>
+  <Field.Label>Any Control</Field.Label>
+  <Field.Context>
+    {#snippet render(field)}
+      <input {...field().getInputProps()} />
+    {/snippet}
+  </Field.Context>
+  <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
+  <Field.ErrorText>This field has an error</Field.ErrorText>
+</Field.Root>

packages/svelte/src/lib/components/field/field.stories.ts

@@ -8,6 +8,7 @@ import RootProviderExample from './examples/root-provider.svelte'
 import SelectExample from './examples/select.svelte'
 import TextareaAutoresizeExample from './examples/textarea-autoresize.svelte'
 import TextareaExample from './examples/textarea.svelte'
+import CustomControlExample from './examples/custom-control.svelte'
 
 const meta: Meta = {
   title: 'Components/Field',
@@ -57,6 +58,12 @@ export const Disabled = {
   }),
 }
 
+export const CustomControl = {
+  render: () => ({
+    Component: CustomControlExample,
+  }),
+}
+
 export const RootProvider = {
   render: () => ({
     Component: RootProviderExample,

packages/svelte/src/lib/components/field/use-field.svelte.ts

@@ -118,6 +118,7 @@ export const useField = (inProps: MaybeFunction<UseFieldProps> = {}) => {
       'data-disabled': dataAttr(disabled),
       'data-invalid': dataAttr(invalid),
       'data-readonly': dataAttr(readOnly),
+      'data-required': dataAttr(required),
       for: controlId,
     }) as HTMLProps<'label'>
 

packages/vue/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+
+- **Field**: Add `data-required` attribute to Field.Label part
+
 ## [5.22.0] - 2025-08-28
 
 ### Added

packages/vue/src/components/field/examples/custom-control.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Field } from '@ark-ui/vue/field'
+</script>
+
+<template>
+  <Field.Root invalid>
+    <Field.Label>Any Control</Field.Label>
+    <Field.Context v-slot="field">
+      <input v-bind="field.getInputProps()" />
+    </Field.Context>
+    <Field.HelperText>Uses getControlProps() for maximum flexibility</Field.HelperText>
+    <Field.ErrorText>This field has an error</Field.ErrorText>
+  </Field.Root>
+</template>

packages/vue/src/components/field/field.stories.vue

@@ -10,6 +10,7 @@ import Select from './examples/select.vue'
 import TextareaAutoresize from './examples/textarea-autoresize.vue'
 import TextareaControlled from './examples/textarea-controlled.vue'
 import Textarea from './examples/textarea.vue'
+import CustomControl from './examples/custom-control.vue'
 </script>
 <template>
   <Story title="Field">
@@ -28,6 +29,9 @@ import Textarea from './examples/textarea.vue'
     <Variant title="Disabled">
       <Disabled />
     </Variant>
+    <Variant title="Custom Control">
+      <CustomControl />
+    </Variant>
     <Variant title="Textarea">
       <Textarea />
     </Variant>

packages/vue/src/components/field/use-field.ts

@@ -104,6 +104,7 @@ export const useField = (props: MaybeRef<UseFieldProps> = {}) => {
       'data-disabled': dataAttr(values.disabled),
       'data-invalid': dataAttr(values.invalid),
       'data-readonly': dataAttr(values.readOnly),
+      'data-required': dataAttr(values.required),
       htmlFor: id.value,
     }
   }

website/src/content/pages/components/field.mdx

@@ -51,6 +51,13 @@ have maximum control over the field programmatically.
 
 > If you're using the `Field.RootProvider` component, you don't need to use the `Field.Root` component.
 
+### Custom Control
+
+Use the `Field.Context` or `useFieldContext` hook to access the internal state of the field.This can help you wire up
+custom controls with the `Field` component.
+
+<Example id="custom-control" />
+
 ## API Reference
 
 <ComponentTypes id="field" />