# Vuetify stepper labels

**URL:** <https://jsonforms.discourse.group/t/vuetify-stepper-labels/2779>\
**Category:** General\
**Tags:** vue\
**Created:** [September 25, 2025, 1:19pm UTC](https://jsonforms.discourse.group/t/vuetify-stepper-labels/2779 "2025-09-25T13:19:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kfleming](https://avatars.discourse-cdn.com/v4/letter/k/c67d28/32.png) [@kfleming](https://jsonforms.discourse.group/u/kfleming)\
**Post date:** [September 25, 2025, 1:19pm UTC](https://jsonforms.discourse.group/t/vuetify-stepper-labels/2779/1 "2025-09-25T13:19:42Z")

</div>

Hello,

I’ve just started out with JSONForms and I’m trying to create a stepper for a mobile friendly site using the Vuetify render set. The issue that I’m having is with label rendering. I want the stepper labels to disappear when I add the mobile flag to my UI schema.

```auto
"uischema":
    {
        "type": "Categorization",
        "elements":
        [
            {
                "type": "Category",
                "label": "Age",
                "elements":
                [
                    {
                        "type": "Control",
                        "scope": "#/properties/age"
                    }
                ]
            },
...
"options":
        {
            "variant": "stepper",
            "showNavButtons": true,
            "vertical": false,
            "vuetify": {
            	"v-stepper": {
            		"mobile": true
            	}
            }
        }
}

```

Unfortunately when I use the ‘label’ key the text gets rendered as a text node inside the `v-stepper-item__content` element and doesn’t get hidden by the css rules when the `v-stepper--mobile` class is added to the stepper container div. Ideally I’d like to populate the `VStepperItem` component slots for title and subtitle but I’m not clear on how to do this from the uischema?  
Any help appreciated!

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [October 10, 2025, 8:45am UTC](https://jsonforms.discourse.group/t/vuetify-stepper-labels/2779/2 "2025-10-10T08:45:14Z")

</div>

Hello @kfleming ,

You are right, currently the text is rendered in the stepper item’s default slot (see code below) and, thus, is not hidden when the `mobile` flag is set to `true`. I think we could change the code to render the label in the title slot instead allowing it to be hidden by the `mobile` flag. If you’d like, you can open a PR for that.

Unfortunately, you cannot currently set the `title` or `subtitle` directly via the UI Schema: The UI Schema only allows settings component props but not slots.

> <https://github.com/eclipsesource/jsonforms/blob/016f1dff9653ac2e977564cbd6d850593309c551/packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue#L42>

Kind regards,

Lucas