Controlling width in NeetoUI Input component

Default width behavior

NeetoUI’s form components (Input, Textarea, Select, TreeSelect, and MultiEmailInput) are designed with smart width defaults that work for most common layouts.

1. Inputs naturally take up full width when placed in flex containers.

2. Forms appear clean and aligned without extra styling.

3. Layouts remain consistent across different implementations.

When to override the default behavior

While the full-width behavior works well for most text Inputs, there are scenarios where you might want to constrain the Input width:

1. Number inputs - Often benefit from a narrower width since numeric values tend to be shorter.

2. Inputs with fixed-width requirements - Like currency fields, percentage fields, etc.

3. Inline form elements - When multiple inputs need to appear on the same line.

4. Specialized form layouts - Where design calls for specific input widths.

How to control input width

To reduce the width of a NeetoUI Input component, simply add the Tailwind flex-grow-0 class to the component:

<Input  
  className="flex-grow-0 w-32" // Disables flex-grow and sets fixed width  
  type="number"  
  placeholder="Enter age"  
/>  

You can combine this with other Tailwind width utilities:

<Input className="flex-grow-0 w-24" /> // Fixed 6rem (96px) width  
<Input className="flex-grow-0 w-auto" /> // Width based on content  
<Input className="flex-grow-0 w-1/2" /> // 50% of parent width  

In summary: By utilizing the flex-grow-0 Tailwind class in conjunction with width utilities, you gain precise control over the width of NeetoUI Input components within various layout scenarios.