View Source TailwindLiveComponents.TextInput (tailwind_live_components v0.5.4)

Link to this section Summary

Functions

Renders the date input with masking

Renders the address input with Google Places API autocomplete

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 date input with masking

options

Options

  • form - The form identifier
  • field - The field name
  • label - The text for the generated <label> element
  • required - Optional flag idicating field is required
  • 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 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
  • required - Optional flag idicating field is required
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • address_field_id - Optional input id of the address field
  • city_field_id - Optional input id of the city field
  • state_field_id - Optional input id of the state field
  • 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
  • required - Optional flag idicating field is required
  • 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
  • required - Optional flag idicating field is required
  • 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
  • required - Optional flag idicating field is required
  • 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
  • required - Optional flag idicating field is required
  • detail - Optional detail shown below the input
  • placeholder - Optional placeholder
  • error - Option error message
  • theme - Optional theme to use for Tailwind classes