InputText

The InputText component is used to collect a single line of text from a user.

Component

Storybook

Storybook - Input Text Documentation

Figma Demo

Guidelines

Variations

Text inputs are offered in three sizes:

  • sm (32px)
  • base (40px)
  • lg (48px)

Text inputs allow for a label, placeholder text, and optional helper text. A leading or trailing icon may also be used.

Text inputs allow for semantic states of success, critical, and disabled.

Usage

  • The base size field should be used in the majority of cases.
  • The sm size field should be used in tighter layouts where space is scarce.
  • There is currently not a setting in which lg size fields are used.

Best Practices

  • Use a field label whenever possible so that the purpose of a field is clear.
  • Don’t rely on placeholder text to communicate the intent of a field.

Component Specs

API

  • class: string | Default: undefined
    Custom class to be applied to the input.

  • errorText: string | Default: undefined
    The error text of the input.

  • iconBefore: SvelteComponent | Default: undefined
    The icon before the input.

  • id: string | Default: undefined
    The id of the input.

  • helperText: string | Default: undefined
    The helper text of the input.

  • hiddenLabel: boolean | Default: false
    Hides the label.

  • label: string | Default: undefined
    The label of the input.

  • labelClasses: string | Default: undefined
    Custom class to be applied to the label.

  • placeholder: string | Default: undefined
    The placeholder of the input.

  • size: 'sm' | 'default' | 'lg' | Default: 'default'
    The size of the input.

  • state: 'neutral' | 'success' | 'critical' | 'disabled' | Default: 'neutral'
    The state of the input.

  • testId: string | Default: undefined
    The test id of the input.

  • value: string | Default: ''
    The value of the input.

Example

<script>
	import { Input } from '@getprovi/craft-svelte';
</script>

<input
	placeholder="Placeholder text"
	size="sm"
	id="id"
	bind:value
	label="Text label"
	helperText="Helper text."
	success="{successState}"
	critical="{criticalState}"
/>
<input
	search
	placeholder="Placeholder text"
	id="id"
	bind:value
	label="Search label"
	helperText="Helper text."
/>
<input
	textarea
	placeholder="Placeholder text"
	id="id"
	bind:value
	label="Textarea label"
	helperText="Helper text."
/>

Types

export interface SharedLabelProps {
	hiddenLabel?: ComponentProps<Label>['hidden'];
	label: ComponentProps<Label>['label'];
	labelClasses?: ComponentProps<Label>['class'];
}

export interface SharedInputProps extends Omit<HTMLInputAttributes, 'size'> {
	class?: string | null | undefined;
	errorText?: string | undefined;
	helperText?: string | undefined;
	id: string;
	placeholder?: string | undefined;
	size?: InputSize;
	state?: InputState;
	testId?: string | undefined;
	value?: string;
}

interface Props extends SharedInputProps, SharedLabelProps {
	iconBefore?: typeof SvelteComponent;
}