Components

SlotField

Container field component that provides shared label, help, and error UI for custom slot content.

Component

View code

Show playground

Custom field label (optional)

Insert slot content here

Help text shown below the slot content

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`label`	—	—	`string`
`ariaLabel`	—	—	`string`
`helpText`	—	—	`string`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`error`	—	`''`	`string`
`disabled`	—	`false`	`boolean`
`required`	—	`false`	`boolean`
`showOptionalLabel`	—	`true`	`boolean`
`optionalLabel`	—	—	`string`

Slots

Name	Description
`default`	Template to render a custom content for the field.

Slot exposed props

Use the default slot to render your custom control while reusing SlotField label, help text, and error UI.

 <template>
    <SlotField
        id="custom-slot-field"
        label="Profile"
        helpText="Write a short bio"
        :required="true"
        error=""
        v-slot="{ id, ariaLabel, hasError, error, helpText, disabled, required }"
    >
        <YourComponent
            :id="id"
            :aria-label="ariaLabel"
            :hasError="hasError"
            :error="error"
            :helpText="helpText"
            :disabled="disabled"
            :required="required"
        />
    </SlotField>
</template>

The slot exposes: id, ariaLabel, error, hasError, helpText, disabled, required.

ariaLabel

Provides an accessibility label that can be consumed by your slotted control when visual labels are hidden.

 <template>
    <SlotField
        id="custom-slot-field"
        label=""
        ariaLabel="Custom control label"
        v-slot="{ id, ariaLabel }"
    >
        <YourComponent :id="id" :aria-label="ariaLabel" />
    </SlotField>
</template>

Type: string

Usage

id

Sets the id of the field.

 <template>
    <SlotField id="field-id" v-slot="{ id }">
        <YourComponent :id="id" />
    </SlotField>
</template>

Type: string
Required: true

label

Sets the label of the field.

 <template>
    <SlotField id="field-id" label="Custom field label" v-slot="{ id }">
        <YourComponent :id="id" />
    </SlotField>
</template>

Type: string

helpText

Sets helper text displayed below the field when there is no error.

 <template>
    <SlotField id="field-id" helpText="Help text shown below the slot content" v-slot="{ id }">
        <YourComponent :id="id" />
    </SlotField>
</template>

Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <SlotField id="field-id" helpTextPosition="top" helpText="Appears above the field" v-slot="{ id }">
        <YourComponent :id="id" />
    </SlotField>
</template>

Type: Position
Default: Position.BOTTOM

Options

Value	Description
`TOP`	top
`BOTTOM`	bottom

error

Defines the error message displayed by the field. When this prop is not empty, the label and helper text area use error styling.

 <template>
    <SlotField id="field-id" error="This field is required" v-slot="{ id, hasError }">
        <YourComponent
            :id="id"
            :hasError="hasError"
        />
    </SlotField>
</template>

Type: string
Default: ''

disabled

Sets the disabled state of the field wrapper.

 <template>
    <SlotField id="field-id" disabled v-slot="{ id, disabled }">
        <YourComponent
            :id="id"
            :disabled="disabled"
        />
    </SlotField>
</template>

Type: boolean
Default: false

required

Sets the required state passed to the slot props.

 <template>
    <SlotField id="field-id" required v-slot="{ id, required }">
        <YourComponent
            :id="id"
            :required="required"
        />
    </SlotField>
</template>

Type: boolean
Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <SlotField id="field-id" label="Profile" :showOptionalLabel="false" v-slot="{ id }">
        <YourComponent :id="id" />
    </SlotField>
</template>

Type: boolean
Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <SlotField id="field-id" label="Profile" optionalLabel="(not required)" v-slot="{ id }">
        <YourComponent :id="id" />
    </SlotField>
</template>

Type: string