or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

base.md components.md customization.md elements.md form.md grid.md helpers.md index.md layout.md

tile.json

Form Controls

Comprehensive form input styling and controls including text inputs, textareas, selects, checkboxes, radios, file inputs, and form layout utilities.

Capabilities

Text Inputs and Textarea

Input fields and text areas with consistent styling, validation states, and size variants.

/**
 * Import input and textarea styles
 */
@use 'bulma/sass/form/input-textarea';

<!-- Text inputs -->
<input class="input" type="text" placeholder="Text input">
<input class="input is-primary" type="text" placeholder="Primary input">
<input class="input is-info" type="text" placeholder="Info input">
<input class="input is-success" type="text" placeholder="Success input">
<input class="input is-warning" type="text" placeholder="Warning input">
<input class="input is-danger" type="text" placeholder="Danger input">

<!-- Input sizes -->
<input class="input is-small" type="text" placeholder="Small input">
<input class="input" type="text" placeholder="Normal input">
<input class="input is-medium" type="text" placeholder="Medium input">
<input class="input is-large" type="text" placeholder="Large input">

<!-- Input states -->
<input class="input is-loading" type="text" placeholder="Loading input">
<input class="input" type="text" placeholder="Disabled input" disabled>
<input class="input is-static" type="text" value="Static input" readonly>

<!-- Input styles -->
<input class="input is-rounded" type="text" placeholder="Rounded input">

<!-- Textarea -->
<textarea class="textarea" placeholder="Textarea"></textarea>
<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>

<!-- Textarea sizes -->
<textarea class="textarea is-small" placeholder="Small textarea"></textarea>
<textarea class="textarea is-medium" placeholder="Medium textarea"></textarea>
<textarea class="textarea is-large" placeholder="Large textarea"></textarea>

<!-- Textarea rows -->
<textarea class="textarea" rows="10" placeholder="10 rows textarea"></textarea>

Input Types:

<!-- Various input types -->
<input class="input" type="text" placeholder="Text">
<input class="input" type="email" placeholder="Email">
<input class="input" type="password" placeholder="Password">
<input class="input" type="number" placeholder="Number">
<input class="input" type="tel" placeholder="Phone">
<input class="input" type="url" placeholder="URL">
<input class="input" type="search" placeholder="Search">
<input class="input" type="date">
<input class="input" type="time">
<input class="input" type="datetime-local">

Select Dropdown

Styled select dropdowns with single and multiple selection support.

/**
 * Import select styles
 */
@use 'bulma/sass/form/select';

<!-- Basic select -->
<div class="select">
  <select>
    <option>Select dropdown</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

<!-- Select colors -->
<div class="select is-primary">
  <select>
    <option>Primary select</option>
  </select>
</div>

<div class="select is-info">
  <select>
    <option>Info select</option>
  </select>
</div>

<!-- Select sizes -->
<div class="select is-small">
  <select>
    <option>Small select</option>
  </select>
</div>

<div class="select is-medium">
  <select>
    <option>Medium select</option>
  </select>
</div>

<div class="select is-large">
  <select>
    <option>Large select</option>
  </select>
</div>

<!-- Select states -->
<div class="select is-loading">
  <select>
    <option>Loading select</option>
  </select>
</div>

<!-- Multiple select -->
<div class="select is-multiple">
  <select multiple size="8">
    <option value="Argentina">Argentina</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Brazil">Brazil</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Guyana">Guyana</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Suriname">Suriname</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
  </select>
</div>

<!-- Rounded select -->
<div class="select is-rounded">
  <select>
    <option>Rounded select</option>
  </select>
</div>

<!-- Fullwidth select -->
<div class="select is-fullwidth">
  <select>
    <option>Fullwidth select</option>
  </select>
</div>

Checkbox and Radio

Styled checkboxes and radio buttons with consistent appearance.

/**
 * Import checkbox and radio styles
 */
@use 'bulma/sass/form/checkbox-radio';

<!-- Checkboxes -->
<label class="checkbox">
  <input type="checkbox">
  I agree to the <a href="#">terms and conditions</a>
</label>

<label class="checkbox">
  <input type="checkbox" checked>
  I agree to receive marketing emails
</label>

<label class="checkbox" disabled>
  <input type="checkbox" disabled>
  This is disabled
</label>

<!-- Radio buttons -->
<div class="control">
  <label class="radio">
    <input type="radio" name="question">
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="question">
    No
  </label>
</div>

<div class="control">
  <label class="radio">
    <input type="radio" name="foobar">
    Foo
  </label>
  <label class="radio">
    <input type="radio" name="foobar" checked>
    Bar
  </label>
</div>

<div class="control">
  <label class="radio" disabled>
    <input type="radio" name="rsvp" disabled>
    Maybe
  </label>
</div>

File Input

Enhanced file input with customizable styling and multiple selection support.

/**
 * Import file input styles
 */
@use 'bulma/sass/form/file';

<!-- Basic file input -->
<div class="file">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
  </label>
</div>

<!-- File input with filename -->
<div class="file has-name">
  <label class="file-label">
    <input class="file-input" type="file" name="resume">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
    <span class="file-name">
      No file uploaded
    </span>
  </label>
</div>

<!-- File input colors -->
<div class="file is-primary">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-label">Primary file</span>
    </span>
  </label>
</div>

<!-- File input sizes -->
<div class="file is-small">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-label">Small file</span>
    </span>
  </label>
</div>

<div class="file is-medium">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-label">Medium file</span>
    </span>
  </label>
</div>

<div class="file is-large">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-label">Large file</span>
    </span>
  </label>
</div>

<!-- File input alignment -->
<div class="file is-right">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-label">Right aligned</span>
    </span>
  </label>
</div>

<!-- Fullwidth file input -->
<div class="file is-fullwidth">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-label">Fullwidth file input</span>
    </span>
  </label>
</div>

<!-- Boxed file input -->
<div class="file is-boxed">
  <label class="file-label">
    <input class="file-input" type="file">
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choose a file…
      </span>
    </span>
  </label>
</div>

Form Layout and Controls

Form structure and layout utilities for organizing form elements.

/**
 * Import form layout and control utilities
 */
@use 'bulma/sass/form/shared';
@use 'bulma/sass/form/tools';

<!-- Field wrapper -->
<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
</div>

<!-- Field with help text -->
<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="Email input">
  </div>
  <p class="help">This email will be used for login</p>
</div>

<!-- Field with validation help -->
<div class="field">
  <label class="label">Username</label>
  <div class="control">
    <input class="input is-danger" type="text" placeholder="Text input" value="bulma">
  </div>
  <p class="help is-danger">This username is already taken</p>
</div>

<!-- Field with icon -->
<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Email">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </p>
</div>

<!-- Horizontal fields -->
<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">From</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control is-expanded has-icons-left">
        <input class="input" type="text" placeholder="Name">
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control is-expanded has-icons-left has-icons-right">
        <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fas fa-check"></i>
        </span>
      </p>
    </div>
  </div>
</div>

<!-- Grouped fields -->
<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Submit</button>
  </div>
  <div class="control">
    <button class="button is-link is-light">Cancel</button>
  </div>
</div>

<!-- Grouped multiline -->
<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">npm</span>
      <span class="tag is-info">v1.0.3</span>
    </div>
  </div>
  
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">build</span>
      <span class="tag is-success">passing</span>
    </div>
  </div>
  
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">chat</span>
      <span class="tag is-primary">on gitter</span>
    </div>
  </div>
</div>

<!-- Addons -->
<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <a class="button is-info">
      Search
    </a>
  </div>
</div>

<!-- Expanded addons -->
<div class="field has-addons">
  <div class="control">
    <div class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </div>
  </div>
  <div class="control is-expanded">
    <input class="input" type="text" placeholder="Amount of money">
  </div>
  <div class="control">
    <a class="button">Transfer</a>
  </div>
</div>

Form Validation States

Visual feedback for form validation with consistent error, warning, and success states.

<!-- Success state -->
<div class="field">
  <label class="label">Username</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small is-left">
      <i class="fas fa-user"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
  <p class="help is-success">This username is available</p>
</div>

<!-- Warning state -->
<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-warning" type="email" placeholder="Email input" value="hello@">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </div>
  <p class="help is-warning">This email is incomplete</p>
</div>

<!-- Error state -->
<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </div>
  <p class="help is-danger">This email is invalid</p>
</div>

Complete Form Example

<!-- Complete form structure -->
<form>
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Full name" required>
    </div>
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control has-icons-left has-icons-right">
      <input class="input" type="email" placeholder="Email" required>
      <span class="icon is-small is-left">
        <i class="fas fa-envelope"></i>
      </span>
    </div>
  </div>

  <div class="field">
    <label class="label">Subject</label>
    <div class="control">
      <div class="select is-fullwidth">
        <select>
          <option>General inquiry</option>
          <option>Support request</option>
          <option>Bug report</option>
          <option>Feature request</option>
        </select>
      </div>
    </div>
  </div>

  <div class="field">
    <label class="label">Message</label>
    <div class="control">
      <textarea class="textarea" placeholder="Your message" rows="4" required></textarea>
    </div>
  </div>

  <div class="field">
    <div class="control">
      <label class="checkbox">
        <input type="checkbox" required>
        I agree to the <a href="#">terms and conditions</a>
      </label>
    </div>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button class="button is-link" type="submit">Submit</button>
    </div>
    <div class="control">
      <button class="button is-link is-light" type="reset">Cancel</button>
    </div>
  </div>
</form>