InputSelect

Component

Storybook

Figma Demo

Guidelines

Variations

InputSelect is offered in three sizes:

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

Usage

• Use InputSelect when a single selection is available to a user from a large set of options.
• If there are only 2 or 3 options available — and they are mutually exclusive — consider using Radio.
• If multiple selections may be made, consider using a set of Checkboxes.

Note: A future component such as a combobox may allow for multiple selections within a select input.

Size

• 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.

Accessibility

• A label and a unique id should be provided for all inputs. If it should be hidden, the hiddenLabel prop can be provided and an accessible aria-label will be added.

Content

• Placeholder text that reads “Choose an option…” is visible in a non-selected field by default. This wording may be changed to reflect the intent of the input as needed, e.g. “Choose a delivery date.”
• If an input is pre-selected by default, the placeholder text will still show in the native select component but can still be edited as needed.

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.

• items: SelectOptionType<unknown>[] | Default: []
  The items to choose in the select.

• 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 { InputSelect } from '@getprovi/craft-svelte';
</script>

<InputSelect
  label="Label"
  id="input"
  bind:value="Value"
  items={[
    {
      name: 'Option 1',
      value: 'option1'
    },
    {
      name: 'Option 2',
      value: 'option2'
    }
  ]}
/>

Types

type SelectOptionType<T> = {
	name: string | number;
	value: T;
};

interface Props extends SharedLabelProps, SharedInputProps {
	iconBefore?: typeof SvelteComponent;
	items: SelectOptionType<unknown>[];
}

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

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