import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import LinkTo from '@storybook/addon-links/react';
import { TextInput } from './TextInput';

<Meta title="Forms/TextInput" component={TextInput} />

# TextInput

A text input component for user input.

## Usage guidelines

- **Do** make the TextInput component a child of a `form` element.
- **Do** use the `type` that best describes the content type.
- **Do** use the `readOnly` prop if a user should be able to interact with the field without changing it, otherwise use `disabled`.
- **Do** use <LinkTo kind="TextMultilineInput">TextMultilineInput</LinkTo> for multiline input (`textarea`).
- **Don't** use the same text for the `label` and `placeholder`.


## Props

export const defaultActions = {
	onBlur: action( 'blurred' ),
	onChange: action( 'changed' ),
	onFocus: action( 'focused' ),
};

<Canvas>
	<Story
		args={{
			...defaultActions,
			id: 'search',
			placeholder: 'Search',
			type: 'search',
		}}
		name="Default"
	>
		{args => <TextInput {...args} />}
	</Story>
</Canvas>

<ArgsTable story="Default" />


## Examples

Sample component with email type, which activates browser validations and autocomplete.

<Canvas>
	<Story
		args={{
			...defaultActions,
			autoComplete: 'email',
			id: 'email',
			label: 'Email',
			placeholder: 'example@qz.com',
			required: true,
			type: 'email',
		}}
		name="Email"
	>
		{args => <TextInput {...args} />}
	</Story>
</Canvas>

Sample component with password type, which automatically obscures user input.

<Canvas>
	<Story
		args={{
			...defaultActions,
			id: 'password',
			label: 'Password',
			required: true,
			type: 'password',
		}}
		name="Password"
	>
		{args => <TextInput {...args} />}
	</Story>
</Canvas>

Sample component with hint and validation override.

<Canvas>
	<Story
		args={{
			...defaultActions,
			id: 'promo-code',
			label: 'Promo code',
			placeholder: 'Promo code',
			invalid: true,
			hint: 'Not a valid promo code',
			type: 'text',
		}}
		name="Invalid"
	>
		{args => <TextInput {...args} />}
	</Story>
</Canvas>