View Source TailwindLiveComponents.TextInput (tailwind_live_components v0.4.1)

Link to this section Summary

Functions

Renders the address input with Google Places API autocomplete

Renders the date input with masking

Renders the tel input with masking

Renders the text input

Renders the textarea

Renders the zip input with masking

Link to this section Functions

Renders the address input with Google Places API autocomplete

Requires setup of Google Places API: https://developers.google.com/maps/documentation/javascript/places-autocomplete

options

Options

  • form - The form identifier
  • field - The field name
  • value - The current value for the input
  • api_key - Google Places API Key
  • latitude - The latitude for the center point of the Places search
  • longitude - The longitude for the center point of the Places search
  • country_code - The country code to restrict Google Place search to (default is 'us')
  • label - The text for the generated <label> element
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Option error message
  • theme - Optional theme to use for Tailwind classes

Renders the date input with masking

options

Options

  • form - The form identifier
  • field - The field name
  • label - The text for the generated <label> element
  • value - The current value for the input
  • autocomplete - Optional autocomplete attribute
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Option error message
  • theme - Optional theme to use for Tailwind classes

Renders the tel input with masking

<.tel_input form={f} field={:phone} label="Tel Input" value="555234" />

options

Options

  • form - The form identifier
  • field - The field name
  • label - The text for the generated <label> element
  • value - The current value for the input
  • autocomplete - Optional autocomplete attribute
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Option error message
  • theme - Optional theme to use for Tailwind classes

Renders the text input

<.text_input form={f} field={:fruit} placeholder="Fruit" label="Fruit" error="test error message" />

options

Options

  • form - The form identifier
  • field - The field name
  • label - The text for the generated <label> element
  • value - The current value for the input
  • autocomplete - Optional autocomplete attribute
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Optional error message
  • theme - Optional theme to use for Tailwind classes

Renders the textarea

<.textarea form={f} field={:fruit} placeholder="Select Fruit" label="Textarea" value="This is a test text area" />

options

Options

  • form - The form identifier
  • field - The field name
  • label - The text for the generated <label> element
  • value - The current value for the input
  • autocomplete - Optional autocomplete attribute
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Optional error message
  • theme - Optional theme to use for Tailwind classes

Renders the zip input with masking

options

Options

  • form - The form identifier
  • field - The field name
  • value - The current value for the input
  • autocomplete - Optional autocomplete attribute
  • label - The text for the generated <label> element
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Option error message
  • theme - Optional theme to use for Tailwind classes