InputText

Component

Storybook

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;
}