Description
Provides an accessible description for a form field.
The Description component provides an accessible description for a field. It renders a <div> element and should be used to provide additional context or instructions for a form field.
Descriptions must be used within the context of a Field, Fieldset, or ElementField component and will automatically be linked to the Control of the field using the aria-describedby attribute.
Usage
<Field name="name" {form}>
<Control>
{#snippet children({ props })}
<Label>Name</Label>
<input type="text" {...attrs} />
{/snippet}
</Control>
<Description>Your full name, including your middle name.</Description>
</Field>
API Reference
Props
The Description component accepts all props that a standard HTML <div> element would accept, along with a few additional props:
A reference to the underlying HTML element rendered by the Description component.
<Description bind:ref={descriptionRef}>
<!-- ... -->
</Description>
If provided, the Description component will not render an HTML element and will instead expect you to spread the snippet's props onto an element of your choosing.
See the child snippet documentation for more information.
Any additional props provided to the Description component will be spread onto the underlying HTML element.
Data Attributes
The following data attributes are automatically applied to the <div> element rendered by the Description component.
Applied to the description element for selection during styling or otherwise.
Applied to the description element when a validation error exists on the field.