InputText
The InputText component is used to collect a single line of text from a user.
Component
Storybook
Storybook - Input Text DocumentationFigma 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;
}