Field sizing

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "field-sizing"; export const description = "Utilities for controlling the sizing of form controls.";

Examples¶

Sizing based on content¶

Use the field-sizing-content utility to allow a form control to adjust its size based on the content:

{

}
</Example>

<div class="highlight"><pre><span></span><code><span class="cm"></span>
<span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"field-sizing-content ..."</span> <span class="na">rows</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>
  Latex Salesman, Vanderlay Industries
<span class="p"></</span><span class="nt">textarea</span><span class="p">></span>
</code></pre></div>

</Figure>

<h3 id="using-a-fixed-size">Using a fixed size<a class="headerlink" href="#using-a-fixed-size" title="Permanent link">¶</a></h3>
<p>Use the <code>field-sizing-fixed</code> utility to make a form control use a fixed size:</p>
<Figure hint="Type in the input below to see the size remain the same">

<div class="highlight"><pre><span></span><code><span class="cm"></span>
<span class="p"><</span><span class="nt">textarea</span> <span class="na">class</span><span class="o">=</span><span class="s">"field-sizing-fixed w-80 ..."</span> <span class="na">rows</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span>
  Latex Salesman, Vanderlay Industries
<span class="p"></</span><span class="nt">textarea</span><span class="p">></span>
</code></pre></div>

</Figure>

<h3 id="responsive-design">Responsive design<a class="headerlink" href="#responsive-design" title="Permanent link">¶</a></h3>
<p><ResponsiveDesign
  element="input"
  property="field-sizing"
  defaultClass="field-sizing-content"
  featuredClass="field-sizing-fixed"
/></p>

</article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
  Retour en haut de la page
</button>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      © 2026 Rebel Platform · Propulsé par <a href="https://api.bobrebel.ca" target="_blank">APICLI</a> · <a href="https://bobcrew.org" target="_blank">BobCrew.org — on recrute des bénévoles 🤘</a>

</div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    
      
      
      <script id="__config" type="application/json">{"annotate": null, "base": "../..", "features": ["navigation.sections", "navigation.top", "navigation.instant", "search.highlight", "search.suggest", "content.code.copy"], "search": "../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copi\u00e9 dans le presse-papier", "clipboard.copy": "Copier dans le presse-papier", "search.result.more.one": "1 de plus sur cette page", "search.result.more.other": "# de plus sur cette page", "search.result.none": "Aucun document trouv\u00e9", "search.result.one": "1 document trouv\u00e9", "search.result.other": "# documents trouv\u00e9s", "search.result.placeholder": "Taper pour d\u00e9marrer la recherche", "search.result.term.missing": "Non trouv\u00e9", "select.version": "S\u00e9lectionner la version"}, "version": null}</script>
    
    
      <script src="../../assets/javascripts/bundle.79ae519e.min.js"></script>
      
    
  </body>
</html>