How to add a permanent label within the React-Select input? - react-select

Question

How could I extend React Select to permanently display an input label within the input? Here's a rough mockup:
Note, I don't want to use the 'placeholder' prop, because I want this label to display even after a value is set.

Answer 1

You could do it by setting the placeholder to an empty value and creating a pseudo :before element in CSS:
class App extends React.Component {
state = {
value: [],
}
handleChange = (value) => {
this.setState({ value });
}
render() {
return (
<Select
className="my-react-select"
multi
onChange={this.handleChange}
options={[
{ value: 'caramel', label: 'Caramel' },
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'mudcake', label: 'Mudcake' },
]}
placeholder=""
value={this.state.value}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
#root {
font-family: sans-serif;
max-width: 400px;
}
.my-react-select .Select-control:before {
color: #aaa;
content: 'Flavors';
line-height: 34px;
padding-left: 10px;
padding-right: 10px;
position: absolute;
}
.my-react-select .Select-placeholder + .Select-input,
.my-react-select .Select-input:first-child,
.my-react-select .Select-value:first-child {
margin-left: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types#15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/classnames#2.2.5/index.js"></script>
<script src="https://unpkg.com/react-input-autosize#2.0.0/dist/react-input-autosize.js"></script>
<script src="https://unpkg.com/react-select/dist/react-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
<div id="root"></div>