SimpleTextField

A simple TextField.

Example

Props

🕹️ standard props
value
string | number
Bound value of the text field.
undefined
valueTo
string | number
Bound value of the second text field for range textfields.
undefined
type
'text' | 'password' | 'number' | 'time' | 'date'
Type of input field.
'text'
range
boolean
Adds a second input field to make a range
false
placeholder
string
Placeholder text.
undefined
placeholderTo
string
Placeholder text.
undefined
disabled
boolean
Whether the input is disabled.
false
readonly
boolean
Whether the input is read-only.
false
id
string
ID of the input field.
undefined
idTo
string
ID of the second input field.
undefined
appendIcon
string
Icon to display at the end.
undefined
appendInnerIcon
string
Icon inside the field at the end.
undefined
prependIcon
string
Icon to display at the start.
undefined
prependInnerIcon
string
Icon inside the field at the start.
undefined
iconSize
string
Size of the icons.
'12pt'
name
string
Name attribute of the input field.
undefined
nameTo
string
Name attribute of the second input field.
undefined
hint
string
Hint text below the input field.
undefined
input
HTMLElement
Reference to the input element.
undefined
inputTo
HTMLElement
Reference to the second input element.
undefined
BetweenLabel
string
Label between the two input for range textfields.
-
class
{ container?: string, row?: string, field?: string, hint?: string, input?: string }
Additional CSS class for the button.
undefined
🎨 style props
--simple-textfield-padding
spacing
Padding inside the text field
0.65rem 1rem 0.65rem 1rem
--simple-textfield-width
size
Width of the text field
280px
--simple-textfield-background-color
color
Background color of the text field
rgb(var(--global-color-background-300), .5)
--simple-textfield-border-radius
size
Border radius of the text field
9999px
--simple-textfield-box-shadow
shadow
Box shadow of the text field
none
--simple-textfield-transition
animation
Transition effect duration
.2s
--simple-textfield-font-size
typography
Font size of the text field
.9rem
--simple-textfield-font-weight
typography
Font weight of the text field
normal
--simple-textfield-outer-gap
spacing
Gap between elements around the text field
8px
--simple-textfield-inner-gap
spacing
Gap between elements inside the text field
8px
--simple-textfield-hint-font-size
typography
Font size of the hint text
.75rem
--simple-textfield-hint-color
color
Color of the hint text
rgb(var(--global-color-contrast-500), .5)
--simple-textfield-hint-margin-left
spacing
Margin left for the hint text
20px
--simple-textfield-margin-bottom
spacing
Bottom margin of the text field
5px
--simple-textfield-color
color
Text color of the input field
rgb(var(--global-color-contrast-900))
--simple-textfield-range-text-align
position
Text align of the first input field for ranges
right

Slots

prependSnippet

Slot for prepending an icon outside the field.

Default content:

{#if !!prependIcon}
  <Icon name={prependIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
prependIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

prependInnerSnippet

Slot for prepending an icon inside the field.

Default content:

{#if !!prependInnerIcon}
  <Icon name={prependInnerIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
prependInnerIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

appendSnippet

Slot for appending an icon outside the field.

Default content:

{#if !!appendIcon}
  <Icon name={appendIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
appendIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

appendInnerSnippet

Slot for appending an icon inside the field.

Default content:

{#if !!appendInnerIcon}
  <Icon name={appendInnerIcon} --icon-size={iconSize}></Icon>
{/if}
    

Available variables:

Name	Type	Description
appendInnerIcon	string | undefined	Icon to display.
iconSize	string	Size of the icon.

hintSnippet

Slot for custom hint text.

Default content:

<div class="row {clazz?.hint || ''}">
  {#if !!hint}
    <span class="hint">{hint}</span>
  {/if}
</div>
    

Available variables:

Name	Type	Description
hint	string | undefined	Hint text to display.

Events

onchange
Triggered when input value changes.
oninput
Triggered while typing inside the input field.
onfocus
Triggered when input field is focused.
onblur
Triggered when input field loses focus.
onkeydown
Triggered when a key is pressed down.
onkeyup
Triggered when a key is released.
onkeypress
Triggered when a key that produces a character is pressed.