component

Input

The input component is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available.

Source code in GitHub Input in Storybook

Set Up #

To use the Input component, import it in the script tag:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

Usage #

This Input component can be used as a generic form element, supporting multiple input types such as text, email, password, number, URL, and phone number.

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input />
</label>

Variant #

The variant prop allows you to control the color theme of the input:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input variant="primary" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input variant="secondary" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input variant="success" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input variant="warning" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input variant="danger" placeholder="Please type something here" />
</label>

Label #

Use the label prop to set a label for the input:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input placeholder="Please type something here" />
</label>

Value #

The value prop allows you to define the input’s current value:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input value="hello world" placeholder="Please type something here" />
</label>

Size #

The size prop lets you adjust the size of the input:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input size="sm" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input size="md" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input size="lg" placeholder="Please type something here" />
</label>

Rounded #

The rounded prop adjusts the border-radius of the input:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input rounded="none" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input rounded="sm" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input rounded="md" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input rounded="lg" placeholder="Please type something here" />
</label>
<label>
	'This is an input'
	<Input rounded="full" placeholder="Please type something here" />
</label>

Disabled #

The disabled prop disables the input:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input disabled={true} placeholder="Please type something here" />
</label>

ReadOnly #

Use the readonly prop to make the input field read-only:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input readonly={true} placeholder="Please type something here" />
</label>

Clearable #

The clearable prop adds a clear button to the input field, allowing the user to clear its contents:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input readonly={true} placeholder="Please type something here" />
</label>

Animation #

Control input animation with the animation prop:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input animation={false} placeholder="Please type something here" />
</label>

Max Count #

The maxCount prop limits the number of characters the user can input:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input maxCount={25} placeholder="Please type something here" />
</label>

Invalid #

The invalid prop marks the input as invalid and displays an error message using invalidText. invalidText to set error message when invalid is true:

Example.svelte
<script>
	import { Input } from '@sans-ui/core';
</script>

<label>
	'This is an input'
	<Input
		invalid={true}
		invalidText="This is invalid text."
		placeholder="Please type something here"
	/>
</label>

Accessibility #

  • Built with a native input element.
  • Visual and ARIA labeling support.
  • Handles events such as change, clipboard, composition, and input.
  • Provides ARIA-based support for required and invalid states.
  • Support for description and error message help text linked to the input via ARIA.

API #

Input provides APIs(Properties) that is necessary for you to configure a Input compponent.

Input Props #

Name Type Default Value
id string | undefined ""
value string | number | undefined undefined
variant 'primary' | 'secondary' | 'success' | 'warning' | 'danger' 'primary'
size 'sm' | 'md' | 'lg' md
label string ""
required boolean false
disabled boolean false
readonly boolean false
clearable boolean false
rounded 'none' | 'sm' | 'md' | 'lg' | 'full none
animation boolean true
placeholder string ""
maxCount number undefined
invalid boolean false
invalidText string ""
startContent SvelteComponent undefined
endContent SvelteComponent undefined

Input Handlers #

Name Type Description
on:change ChangeEventHandler The change event is fired for , , and elements when a change to the element value is committed by the user.

Input Slots #

Name Description
base This slot is applied to input element.
labelWrapper This slot is applied to the div element(wrapper) for the label element.
label This slot is applied to the label element.
inputWrapper This slot is applied to the div element(wrapper) for the input element(base).
startContent This slot is applied to the start-content icon wrapper element if you pass some content through `startContent` prop.
endContent This slot is applied to the end-content icon wrapper element if you pass some content through `endContent` prop.
<Checkbox Link>