TextField

Text fields let users enter and edit text.

Examples

import { TextField } from "@seduo/design-system";
...
<TextField id="example_text" type="text" label="Label" name="example" placeholder="placeholder" />
<TextField id="example_password" type="password" label="Password" name="example" placeholder="placeholder" hasPasswordToggle />
<TextField id="example_email" type="email" label="Email" name="example" placeholder="placeholder" />
<TextField id="example_filled" type="text" label="Label" name="example" value="filled" isRequired validationState="warning" validationText="Message" />
<TextField id="example_error" type="text" label="Label" name="example" isRequired validationState="danger" validationText="Message" />
<TextField id="example_success" type="password" label="Label" name="example" isRequired validationState="success" validationText="Message" hasPasswordToggle />

<Grid cols="2" desktop="3">
    <TextField id="example_text" type="text" label="Label" name="example" placeholder="placeholder" />
    <TextField id="example_password" type="password" label="Password" name="example" placeholder="placeholder" hasPasswordToggle />
    <TextField id="example_email" type="email" label="Email" name="example" placeholder="placeholder" />
    <TextField id="example_filled" type="text" label="Label" name="example" value="filled" isRequired validationState="warning" validationText="Message" />
    <TextField id="example_error" type="text" label="Label" name="example" isRequired validationState="danger" validationText="Message" />
    <TextField id="example_success" type="password" label="Label" name="example" isRequired validationState="success" validationText="Message" hasPasswordToggle />
</Grid>

API

Name	Type	Default	Required	Description
`autoComplete`	`bool`	-	no	Automated assistance in filling
`hasPasswordToggle`	`bool`	-	yes	If true, the `type` is set to `password` and a password toggle is shown
`helperText`	`string`	-	no	Custom helper text
`id`	`string`	-	no	Input and label identification
`inputWidth`	`number`	-	no	Input width
`isDisabled`	`bool`	-	no	Whether is field disabled
`isLabelHidden`	`bool`	-	no	Whether is label hidden
`isRequired`	`bool`	-	no	Whether is field required
`label`	`string`	-	no	Label text
`name`	`string`	-	no	Input name
`pattern`	`string`	-	no	Defines regular expressions for allowed value types
`placeholder`	`string`	-	no	Input placeholder
`ref`	`ForwardedRef<HTMLInputElement>`	-	no	Input element reference
`type`	[`email` \| `number` \| `password` \| `search` \| `tel` \| `text` \| `url`]	-	no	Input type
`UNSAFE_className`	`string`	-	no	Wrapper custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style
`validationState`	Validation dictionary	-	no	Type of validation state
`validationText`	[`string` \| `string[]`]	-	no	Validation text
`value`	`string`	-	no	Input value

On this page