Skip to content

feat(VSelectionControl): add text prop for description below label#22959

Open
sridhar-3009 wants to merge 6 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/checkbox-text-prop-21773
Open

feat(VSelectionControl): add text prop for description below label#22959
sridhar-3009 wants to merge 6 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/checkbox-text-prop-21773

Conversation

@sridhar-3009

Copy link
Copy Markdown

Summary

Fixes #21773 — adds a text prop to v-checkbox (and all other selection controls) that renders a description below the checkbox label.

Changes

  • VSelectionControl.tsx: add text: String prop and text slot; wrap label + text in .v-selection-control__content flex-column container
  • VSelectionControl.sass: add styles for .v-selection-control__content and .v-selection-control__text
  • _variables.scss: add $selection-control-text-font-size (0.875rem) and $selection-control-text-color SASS variables
  • Docs: add prop-text example and section for v-checkbox

Usage

<v-checkbox
  label="Subscribe to newsletter"
  text="You'll receive weekly updates about new features and releases."
/>

The text slot can be used for rich content:

<v-checkbox label="Accept terms">
  <template #text>
    I agree to the <a href="/terms">Terms of Service</a>.
  </template>
</v-checkbox>

Test plan

  • Render a v-checkbox with the text prop — description should appear below the label
  • Verify font size is smaller than the label but larger than hint text
  • Verify the text slot override works
  • Check that v-radio and v-switch also accept the prop (as they share VSelectionControl)
  • Verify no visual regression when text is not set

@J-Sek

J-Sek commented Jun 28, 2026

Copy link
Copy Markdown
Contributor
  • rebase to dev
  • provide Playground snippet in PR description (something similar to quick demo + some use cases where text wraps 2 or more lines)
  • v-switch requires additional padding

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>

2 participants