Label within input

General
1

Is there an option within a control so the label is not displayed within the input field when unfocused? Once focused it moves to the border. My preference is to keep it within the border regardless if focused or not.
image

vs

image

Thanks!

2

Hi @hellsfantasy,

Customizations like this are best solved via the Material UI theming support.

For example this should be sufficient:

const theme = createTheme({
  components: {
    MuiInputLabel: {
      defaultProps: {
        shrink: true,
      },
    },
    MuiOutlinedInput: {
      defaultProps: {
        notched: true,
      },
    },
  },
});

// In your component:

<ThemeProvider theme={theme}>
    <JsonForms {...yourProps} />
</ThemeProvider>