Input

Text inputs (default, material, line, rounded, sizes), textarea, native select, input groups and floating labels.

Inputs

Inputs

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6">
    <ThlField label="Default" v-slot="{ id }"><ThlInput :id="id" v-model="text" placeholder="Type…" /></ThlField>
    <ThlField label="Small / large"><div class="thl-stack"><ThlInput size="sm" placeholder="sm" /><ThlInput size="lg" placeholder="lg" /></div></ThlField>
    <ThlField label="Rounded"><ThlInput rounded placeholder="rounded" /></ThlField>
    <ThlField label="Native select"><ThlNativeSelect v-model="country" :options="countries" /></ThlField>
  </div>
  <div class="thl-col-12 thl-col-md-6">
    <ThlField label="Material"><ThlInput variant="material" placeholder="Material input" /></ThlField>
    <ThlField label="Line"><ThlInput variant="line" placeholder="Line input" /></ThlField>
    <ThlField label="Textarea"><ThlTextarea placeholder="Message" /></ThlField>
  </div>
</div>

React

<Input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type…" />
<Input size="sm" /> <Input variant="material" /> <Input variant="line" /> <Input rounded />
<Textarea placeholder="Message" />
<NativeSelect options={countries} value={country} onChange={(e) => setCountry(e.target.value)} />

Angular

<input thlInput [(ngModel)]="text" placeholder="Type…" />
<input thlInput size="sm" /> <input thlInput variant="material" /> <input thlInput rounded />
<textarea thlInput placeholder="Message"></textarea>
<select thlInput [(ngModel)]="country">@for (c of countries; track c.value) {<option [value]="c.value">{{ c.label }}</option>}</select>

Groups & floating label

Groups & floating label

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6">
    <ThlField label="Username"><ThlInputGroup prepend="@"><ThlInput placeholder="username" /></ThlInputGroup></ThlField>
    <ThlField label="Amount"><ThlInputGroup prepend="$" append=".00"><ThlInput type="number" /></ThlInputGroup></ThlField>
    <ThlField label="Search"><ThlInputGroup><ThlInput placeholder="Search…" /><template #append><ThlButton variant="primary" icon="search">Go</ThlButton></template></ThlInputGroup></ThlField>
  </div>
  <div class="thl-col-12 thl-col-md-6"><div class="thl-stack"><ThlFloatingLabel for="fl1" label="Email"><ThlInput id="fl1" placeholder=" " /></ThlFloatingLabel><ThlFloatingLabel for="fl2" label="Password"><ThlInput id="fl2" variant="material" type="password" placeholder=" " /></ThlFloatingLabel></div></div>
</div>

React

<InputGroup prepend="@"><Input placeholder="username" /></InputGroup>
<InputGroup prepend="$" append=".00"><Input type="number" /></InputGroup>
<FloatingLabel htmlFor="fl1" label="Email"><Input id="fl1" placeholder=" " /></FloatingLabel>

Angular

<thl-input-group prepend="@"><input thlInput placeholder="username" /></thl-input-group>
<thl-input-group prepend="$" append=".00"><input thlInput type="number" /></thl-input-group>

API

Input

<ThlInput> · import { ThlInput } from '@thl-ui/vue'

Prop	Type	Default
modelValue	any	—
size	string	—
variant	string	—
rounded	boolean	—
invalid	boolean	—

Events: update:modelValue

Textarea

<ThlTextarea> · import { ThlTextarea } from '@thl-ui/vue'

Prop	Type	Default
modelValue	string	—
variant	string	—

Events: update:modelValue

NativeSelect

<ThlNativeSelect> · import { ThlNativeSelect } from '@thl-ui/vue'

Prop	Type	Default
modelValue	any	—
options	array	—
size	string	—

Events: update:modelValue

Slots: default

InputGroup

<ThlInputGroup> · import { ThlInputGroup } from '@thl-ui/vue'

Prop	Type	Default
prepend	string	—
append	string	—

Slots: prependdefaultappend

FloatingLabel

<ThlFloatingLabel> · import { ThlFloatingLabel } from '@thl-ui/vue'

Prop	Type	Default
label*	string	—
for*	string	—

Slots: default