現在開発中のプロジェクトで Material-UI というライブラリを利用しているのですが、その中で、Select 要素のラベルを値がない場合でも常に float させたかったので、その対応方法についてです。
Material-UI の公式サイトはこちらから。
Material-UI: A popular React UI framework
https://material-ui.com/
が、公式サイトを見ても実装方法が載っていなかったので調べたところ、下記の記事がとても参考になりました。
reactjs – Select, OutlineInput label with shrink property not same as TextField when empty – Stack Overflow
https://stackoverflow.com/questions/56472438/select-outlineinput-label-with-shrink-property-not-same-as-textfield-when-empty
サンプルコードは下記のとおりです。
<FormControl variant="outlined">
<InputLabel shrink>好きな食べ物</InputLabel>
<Select
notched
label="好きな食べ物"
name="food"
value={this.state.value}
onChange={this.onChange} >
<MenuItem value="apple">りんご</MenuItem>
<MenuItem value="orange">みかん</MenuItem>
<MenuItem value="grape">ぶどう</MenuItem>
<MenuItem value="banana">バナナ</MenuItem>
</Select>
</FormControl>
なお、上記のコードは描画の部分のみを抜粋しております。
ポイントは 2行目の InputLabel 要素に指定した shrink と、4行目の Select に指定した notched です。
こちらを指定することで、Select 要素のラベルが常に上に float されるようになりました！
ちなみに、InputLabel に shrink を指定するだけでもラベルは float されます。
ですが、今回 Select 要素に、枠線がある outlined を使用しているため、これだけでは Select 要素の枠線と float したラベルが思い切り被ってしまいました。
そのため Select に notched を指定したほうが良さそうです。
公式サイトに記載がなかったので、無理なのかと思いこみかけましたが…無事実現できてよかったです。
以上、Material-UI で Select 要素のラベルを常に float させる方法でした。
ご参考になれば幸いです。
