Isolating label and description elements from fields like textfield and selectfield

[binaryartifex]

My intent is to to be able to position label and description elements in isolation from the typical implementation of elements such as textfield and selectfield. the use case is when i have requirements where i might need the label, field and description on top of one another in one screen, and in another i may need the label and description on top of each other in one column, with the field in another column. it turns into a hot props mess that'd rival material ui trying to hard code this condition in the fields. Im essentially trying to achieve something like the following

    <div className="w-full max-w-xs">
      <TextField.Root {...args}>
        <div className="space-y-1">
          <FieldLabel />
          <TextField.Input />
          <FieldDescription />
        </div>
      </TextField.Root>
    </div>

alternative

    <div className="w-full max-w-lg">
      <TextField.Root {...args}>
        <div className="grid grid-cols-[auto_1fr] gap-x-6">
          <div>
            <FieldLabel />
            <FieldDescription />
          </div>
          <TextField.Input />
        </div>
      </TextField.Root>
    </div>

i was actually able to achieve it with the above by having the useTextField in the 'root' and having a separate 'reusable field context' within the textfield root that was passed the label/description related props to the reusable FieldLabel and FieldInput . This unfortunately doesn't work with something like the select field because the children prop is already taken for the collection and i run into a chicken/egg problem when trying to achieve the same positional freedom for description and label elements as the text field. the only way i can think of doing this propertly is somehow using the useField hook in a separate field provider but im struggling to figure out how exactly to implement that in hooks that already generate their own.....any advice would be greatly appreciated.