Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select label is under outline when using outline variant

See original GitHub issue

Describe the bug When using a Select with outline variant the label is under the outline.

To Reproduce

<Select
  name="topic"
  label="Select a topic"
  formControlProps={{
    variant: 'outlined'
  }}
>
  <MenuItem value="general">General support</MenuItem>
</Select>

Screenshots Screen Shot 2020-03-11 at 9 43 28 AM

Desktop (please complete the following information):

Version 2.0,0

Issue Analytics

State:
Created 4 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

cyberwombatcommented, Mar 11, 2020

My form is so beautiful now 😃 thank you for getting that so quick!

1reaction

lookfirstcommented, Mar 11, 2020

I get it. Ok, thanks! I’ll fix that right away.

Top Results From Across the Web

MUI - Outlined select label is not rendering properly

Solution 2: Use Select · Pass the label text as InputLabel children · Pass the label text to the label props of the...

TextField without label in outlined variant break outline at top

@moshfiqrony Hi, i am facing the same issue with MUI Select, with variant="outlined", and label={null} gives me no border on top, ...

React Text Field component - Material UI - MUI

The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......

outline-color - CSS: Cascading Style Sheets - MDN Web Docs

The outline-color CSS property sets the color of an element's outline. ... It is often more convenient to use the shorthand property outline...

Select - Chakra UI

Just like the input component, Select comes in 4 variants, outline ... As with most Chakra components, you can change the arrow icon...