diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass index 365b00c4cc9..4a2295d2d6d 100644 --- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass +++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.sass @@ -95,3 +95,17 @@ .v-selection-control--focus-visible &::before opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier)) + + .v-selection-control__label-wrapper + display: flex + flex-direction: column + justify-content: center + flex: 1 + + .v-label + display: block + + .v-selection-control__description + font-size: $selection-control-description-font-size + color: $selection-control-description-color + line-height: 1.4 diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx index 5da1d121572..f4f3196ec56 100644 --- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx +++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx @@ -52,12 +52,14 @@ export type VSelectionControlSlots = { backgroundColorStyles: Ref } label: { label: string | undefined, props: Record } + description: { description: string | undefined } input: SelectionControlSlot } export const makeVSelectionControlProps = propsFactory({ indeterminate: Boolean, label: String, + description: String, baseColor: String, trueValue: null, falseValue: null, @@ -318,10 +320,23 @@ export const VSelectionControl = genericComponent( - { label && ( - - { label } - + { (label || props.description || slots.description) && ( +
+ { label && ( + + { label } + + )} + + { (props.description || slots.description) && ( +
+ { slots.description + ? slots.description({ description: props.description }) + : props.description + } +
+ )} +
)} ) diff --git a/packages/vuetify/src/components/VSelectionControl/_variables.scss b/packages/vuetify/src/components/VSelectionControl/_variables.scss index 3cd81c8d136..20c477caea7 100644 --- a/packages/vuetify/src/components/VSelectionControl/_variables.scss +++ b/packages/vuetify/src/components/VSelectionControl/_variables.scss @@ -8,3 +8,5 @@ $selection-control-error-color: rgb(var(--v-theme-error)) !default; $selection-control-density: ('default': 0, 'comfortable': -1, 'compact': -3) !default; $selection-control-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default; $selection-control-size: 40px !default; +$selection-control-description-font-size: 0.8125rem !default; +$selection-control-description-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; \ No newline at end of file