Back to Consul

TextInput

ui/packages/consul-ui/app/components/text-input/README.mdx

1.22.71.7 KB
Original Source

TextInput

Form component to be used for entering text values, both short form and long form. Currently an inline component but as and when we get chance this will be changed to also accept slots for specifying specific parts of the component.

hbs
  <TextInput
    @name="single"
    @label="Single Line Text Input"
    @item={{hash
      single=""
    }}
    @placeholder="Placeholder: Enter some single line text here"
    @help="Help me if you can, I'm feeling down"
  />
  <hr />
  <TextInput
    @expanded={{true}}
    @name="Description"
    @label="Multiline Input"
    @item={{hash
      Description="Long form text"
    }}
  />

Arguments

ArgumentTypeDefaultDescription
itemObjectAn object whose properties are to be edited
nameString''An identifier for the property to be edited on the item
labelString@nameA label to use to label the text input element
placeholderStringEquivalent to the HTML placeholder="" attribute
helpStringProvide some help text for the input (consider using @validations instead)
expandedBooleanfalseWhether to use an expanded textarea or just a normal single line input
validationsObjectA validations object to be passed to the underlying validate modifier
chartObjectA StateChart object (implementing state and dispatch to be passed to the underlying validate modifier
oninputFunctionAn event listener fired oninput to the text input

See