Skip to content

feat(VSelectionControl): add description prop below label#22924

Open
jaskeerat911 wants to merge 1 commit into
vuetifyjs:masterfrom
jaskeerat911:feature/checkbox-description
Open

feat(VSelectionControl): add description prop below label#22924
jaskeerat911 wants to merge 1 commit into
vuetifyjs:masterfrom
jaskeerat911:feature/checkbox-description

Conversation

@jaskeerat911

Copy link
Copy Markdown

Description

Adds a description prop and #description slot to VSelectionControl,
rendering text below the label with a font-size between label and hint.

Closes #21773

Changes

  • Added description prop to makeVSelectionControlProps
  • Added v-selection-control__label-wrapper to stack label + description
  • Added v-selection-control__description CSS class
  • Added SASS variables: $selection-control-description-font-size,
    $selection-control-description-color
  • Supports both prop and slot usage

Playground

    <v-checkbox
        label="Accept terms and conditions"
        description="You must read and agree before proceeding"
        hint="View full terms at example.com"
        persistent-hint
    />

    <!-- Slot usage with custom markup -->
    <v-checkbox label="Subscribe to newsletter">
        <template #description>
            Weekly updates only. <a href="#">Unsubscribe anytime</a>
        </template>
    </v-checkbox>

    <!-- Without description — verify existing behaviour unchanged -->
    <v-checkbox label="No description here" />

Adds description prop and slot to VSelectionControl that renders
text below the label. Includes SASS variables for customisation.

resolves vuetifyjs#21773
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add :text prop to <v-checkbox>

1 participant