Context Aware Suggestions

Uses input from one field to intelligently suggest values for related fields. Type a name and get smart suggestions for the display name format.

            
<input
  type="text"
  id="source-display-name"
  quill-suggest="true"
  quill-ctx="Suggest a display name for the data source:"
/>
            
          

---

Smart Validation

Validates input against expected types using AI. For example, detecting when a person's name is entered in a facility name field.

            
<input
  type="text"
  id="facility-name"
  quill-validate="A facility name (e.g. Central Hospital, City Library)"
/>
            
          

---

Arbitrary Formatting & Conversions

Format text into specific patterns on blur. Some common use cases are phone numbers, title cases, but the possibilities are endless. For example spongebobify!

            
<input
  type="text"
  id="source-phone"
  quill-format="text"
  quill-pattern="(###) ###-####"
/>

<input
  type="text"
  id="source-title"
  quill-format="text"
  quill-pattern="AP Style title"
/>
            
          

---

Smart Select

Context-aware dropdown selections that understand relationships between fields. Perfect for country/state selections and hierarchical data. Try something a state is known for (e.g. "Maple Syrup", "Hollywood", "Tequila") or even a zip code!

            
<select
  id="country-select"
  quill-select="true"
  quill-select-ctx="The user is selecting a country"
>
  <option value="">Select a country</option>
  <option value="united-states">United States of America</option>
  <option value="canada">Canada</option>
  <option value="mexico">Mexico</option>
</select>
            
          

---

Smart Breakdown

Automatically parse complex strings into structured data. Enter a product spec or movie title and watch it break down into individual components.

            
<input
  type="text"
  id="product-spec"
  quill-breakdown="product"
/>
            
          

Combine Features!

Combine features for enhanced functionality. This example uses suggestions with smart breakdown to parse movie details from a single input.

            
<input
  type="text"
  id="movie-spec"
  quill-breakdown="movie"
  quill-suggest="true"
  quill-ctx="Suggest a random movie (ex 'The Matrix'):"
/>