InputTextArea

Component

Storybook

Figma Demo

Guidelines

Variations

Text area inputs are offered in three sizes:

• sm
• base
• lg

Each variation aligns with label type size, field type size, and padding for InputText. Think of InputTextArea as larger versions of their InputText counterparts that allow for more copy.

InputTextArea allows for any type of content and may be dragged at the corner to resize. Note that each size variation of this input has a minimum height:

• 72px (sm)
• 88px (base)
• 96px (lg)

Usage

• InputTextArea is intended for users to submit longer content in sentence or paragraph form, such as distributor notes that may be attached to an order.
• InputTextArea allows for semantic states of success and critical for cases where the field may be required in order to submit.
• 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

N/A

Accessibility

N/A

Content

N/A

Component Specs

API

• class: string | Default: undefined
  This prop is used to add a class to the input component.

• id: string | Default: undefined
  This prop is used to add an id to the input component.

• hiddenLabel: boolean | Default: false
  This prop is used to hide the label of the input component.

• label: string | Default: undefined
  This prop is used to add a label to the input component.

• labelClasses: string | Default: ''
  This prop is used to add classes to the label of the input component.

• size: 'sm' | 'default' | 'lg' | Default: 'default'
  This prop is used to change the size of the input component.

• state: 'neutral' | 'success' | 'critical' | 'disabled' | Default: 'neutral'
  This prop is used to change the state of the input component.

• testId: string | Default: undefined
  This prop is used to add a test id to the input component.

• placeholder: string | Default: undefined
  This prop is used to add a placeholder to the input component.

• value: string | Default: ''
  This prop is used to add a value to the input component.

• errorText: string | Default: undefined
  This prop is used to add an error text to the input component.

• helperText: string | Default: undefined
  This prop is used to add a helper text to the input component.

Example

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

<InputTextArea label="Label" id="input" bind:value="Value" />

Types

interface Props extends SharedLabelProps, SharedInputProps {}

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 SharedLabelProps {
	hiddenLabel?: ComponentProps<Label>['hidden'];
	label: ComponentProps<Label>['label'];
	labelClasses?: ComponentProps<Label>['class'];
}