Smelte logo
SMELTE
Github Smelte

Text fields

Text fields let users enter and edit text.

Basic
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 hint
With hint (dense)
Test hint
With error
Test error
Outlined
Outlined with hint
Outlined with error
Test error
Outlined textarea
With basic validation (type="number" min="10" max="100")
With icon
Disabled
<script>
  import TextField from "smelte/src/components/TextField";
  import Code from "docs/Code.svelte";

  import textFields from "examples/text-fields.txt";
</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" />

<Code code={textFields} />