3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Mantine UI の TextInput の input 部分だけ横幅を狭めて、ラベル等の横幅は変えない方法

Last updated at Posted at 2022-12-02

目的

郵便番号の入力欄の幅が狭くなっている様子

上の図の「郵便番号」欄のように、

  • 最高の桁数が決まっていて、
  • その桁数が少ない場合
  • 特に PC で表示するとき

には、入力欄をその桁数に合わせて狭くするのが一般的なグッド・プラクティスだと認識しています。

Mantine UI の TextInput は、 label, description Props を備えている「全部入り」の文字列入力用コンポーネントですが、 それらの横幅を狭めることなく(長い説明文を折り返さず表示できるようにするため)、入力欄本体の横幅だけを狭くするにはどうすれば良いでしょうか?

結論

styles prop を使って、 input にスタイルを当てましょう。

<TextInput
  name="postalCode"
  label="郵便番号"
  required
  description="必須 半角数字でハイフンを含めずに入力して下さい。例: 5400002"
  styles={{ input: { maxWidth: 120 } }}
/>

解説 — Mantine の Styles API について

styles Prop は、 Mantine のコンポーネント全般に備わっている機能です。

この機能を使うと、コンポーネントを構成する小さな要素を指定してスタイルをカスタマイズすることが出来ます。(上記の例では input、ほかに iconlabel など) また、 required のように、コンポーネントが特定の状態におけるスタイルもカスタマイズすることができます。

具体的に、それぞれのコンポーネントのどの要素・どの状態の見た目がカスタマイズ可能なのか調べたいときには、

↓この TextInput の Styles API の章に列挙されているように、

コンポーネントのドキュメント > "Styles API" のタブの内容を参照すると良いでしょう。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?