Text fields

Text fields let users enter and edit text.

Basic

Test label

Props

Inputs accept any props that a normal input element can take, like max-length or type.

prop	description	type	Default value
value	Input value	Boolean	null
color	Color variant, accepts any of the main colors described in Tailwind config	String	primary
label	Input label	String	Empty string
placeholder	Input placeholder	String	Empty string
outlined	Outlined variant	Boolean	false
hint	Hint text appearing under the input	String	Empty string
error	Error text under the input	String \| Boolean	false
append	Append icon name	String	Empty string
prepend	Prepend icon name	String	Empty string
persistentHint	Always show hint, not only on focus	Boolean	false
textarea	Whether text field is textarea	Boolean	false
rows	Rows count for textarea	Integer	5
select	Whether text field is select	Boolean	false
autocomplete	Whether select field is autocomplete	Boolean	false
noUnderline	Hide focus underline element	Boolean	false
appendReverse	Reverse appended icon	Boolean	false
prependReverse	Reverse prepended icon	Boolean	false
bgColor	Background color to match for outlined elevated label	String	white
iconClasses	Classes to pass down to icon component	String	Empty string

With hint

Test label

Test hint

With hint (dense)

Test label

Test hint

With error

Test label

Test error

Outlined

Test label

Outlined with hint

Test label

Outlined with error

Test label

Test error

Outlined textarea

Test label

With basic validation (type="number" min="10" max="100")

Test label

With icon

Icon before

Icon after

Disabled

Icon before

Icon after

<script>
  import { TextField } from "smelte";
</script>

<h6 class="mb-3 mt-6">Basic</h6>
<TextField label="Test label" />
<h6 class="mb-3 mt-6">With hint</h6>
<TextField label="Test label" hint="Test hint" persistentHint color="blue" />
<h6 class="mb-3 mt-6">With error</h6>
<TextField label="Test label" error="Test error" />
<h6 class="mb-3 mt-6">Outlined</h6>
<TextField label="Test label" outlined />
<h6 class="mb-3 mt-6">Outlined with hint</h6>
<TextField label="Test label" outlined hint="Test hint" />
<h6 class="mb-3 mt-6">Outlined with error</h6>
<TextField label="Test label" outlined error="Test error" />
<h6 class="mb-3 mt-6">Outlined textarea</h6>
<TextField label="Test label" textarea rows="5" outlined />
<h6 class="mb-3 mt-6">With basic validation (type="number" min="10" max="100")</h6>
<TextField label="Test label" outlined type="number" min="10" max="100" />