Text Field
Text fields are a common component on forms to get direct user input.
This component is used along the form provider. It is recommended to check it out for more information about its use.
Basic Implementation
To start using the text field component, you need to put it inside a form provider.
import { useState } from "react";
import { Form, TextField, Button, type FormValues } from "cloth-ui";
export const BasicComponent = () => {
const [username, setUsername] = useState("");
const handleSubmit = (data: FormValues) => {
setUsername(data["username"].toString()):
};
return (
<Form
id="myForm"
submit={handleSubmit}
>
<TextField id="username" variant="primary" label="Username" />
<Button variant="secondary" text="Submit" buttonType="submit" />
{username && (
<span>Hello, {username}!</span>
)}
</Form>
);
};
Styles Variants
Text fields comes with two variants of styles.
import { TextField } from "cloth-ui";
export const VariantComponent = () => {
return (
<div>
<TextField id="text1" variant="primary" label="Text Field" />
<TextField id="text2" variant="secondary" label="Text Field" />
</div>
);
};
Note that you are not able to type anything on the fields in this example. This is due to its strict relation with the Form Provider.
Disabled Fields
Text fields also can be disabled using the disabled attribute.
import { TextField } from "cloth-ui";
export const DisabledComponent = () => {
return (
<div>
<TextField id="text1" variant="primary" label="Text Field" disabled />
<TextField id="text2" variant="secondary" label="Text Field" disabled />
</div>
);
};
Field Type
Text fields have three types: text, password and number. By default, it is set to text.
import { Form, TextField } from "cloth-ui";
export const TypeComponent = () => {
return (
<Form
id="myForm"
submit={() => {}}
>
<TextField id="text1" variant="primary" label="Text" />
<TextField
id="text2"
variant="primary"
label="Password"
type="password"
/>
<TextField id="text3" variant="primary" label="Number" type="number" />
</Form>
);
};
Required Attribute
Text fields can be set as a required input, so it needs to be filled for the form to be submited successfully. You can also pass custom validation functions.
import { Form, TextField } from "cloth-ui";
export const RequiredComponent = () => {
return (
<Form
id="myForm"
submit={() => {}}
>
<TextField
id="text1"
variant="primary"
label="Text"
type="text"
required
/>
<TextField
id="text2"
variant="primary"
label="Password"
type="password"
required
/>
<TextField
id="text3"
variant="primary"
label="Number"
type="number"
required
/>
</Form>
);
};
ReadOnly Attribute
Text fields can be set as a readOnly input, meaning that you can only see the content but cannot edit it. You can still select it and even copy it.
import { Form, TextField } from "cloth-ui";
export const ReadOnlyComponent = () => {
return (
<Form
id="myForm"
submit={() => {}}
>
<TextField
id="text1"
variant="primary"
label="Text"
type="text"
readOnly
/>
<TextField
id="text2"
variant="primary"
label="Password"
type="password"
readOnly
/>
<TextField
id="text3"
variant="primary"
label="Number"
type="number"
readOnly
/>
</Form>
);
};
Note that you need to set "readOnly" instead of "readonly" for it to work.