Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[studio] Explain props of text-field component with demos #4012

Merged
merged 2 commits into from
Aug 29, 2024
Merged

[studio] Explain props of text-field component with demos #4012

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
51ed85f
add
prakhargupta1 Aug 28, 2024
2939a5a
Merge branch 'master' into textfield-demo
prakhargupta1 Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add
  • Loading branch information
@prakhargupta1
prakhargupta1 committed Aug 28, 2024
commit 51ed85f0d30e263cb12d28d2021e3f5aad69049f
14 changes: 14 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextFieldIsRequired.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

export default function TextFieldIsRequired() {
return (
<TextField
label="Name"
size="small"
placeholder="Enter name"
isRequired
sx={{ width: 280 }}
/>
);
}
14 changes: 14 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextFieldMaxLength.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

export default function TextFieldMaxLength() {
return (
<TextField
label="Zip code"
size="small"
maxLength="6"
placeholder="Enter zip code"
sx={{ width: 280 }}
/>
);
}
16 changes: 16 additions & 0 deletions docs/data/toolpad/studio/components/text-field/TextFieldMinLength.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';
import { TextField } from '@toolpad/studio-components';

export default function TextFieldMinLength() {
return (
<TextField
label="Password"
size="small"
minLength="6"
placeholder="Enter password"
password
isRequired
sx={{ width: 280 }}
/>
);
}
18 changes: 15 additions & 3 deletions docs/data/toolpad/studio/components/text-field/text-field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,29 @@ Disabled property shows the state of the component so that end user is aware tha

## Validation

The validation props offer the option to create an interactive text field component for various scenarios. These are available as a checkbox configurations in the Toolpad Studio editor.

### isRequired

isRequired is useful when the action can't be perfomed without a user provided text value.
The `isRequired` prop is useful to display an error message when a value is not provided. It can be used for mandatory fields.

{{"demo": "TextFieldIsRequired.js", "hideToolbar": true}}

### minLength

A validation check on the minimum length of the input.
Shows an error message according to the minimum required length for the provided text value. It can be used to ensure that a provided password is long enough, for example.

In the demo below, the input must be more than 6 characters long, otherwise a validation error is shown.

{{"demo": "TextFieldMinLength.js", "hideToolbar": true}}

### maxLength

A validation check on the maximum length of the input.
Shows an error message according to the maximum required length for the provided text value. In combination with other props, it can be used to enforce the length of zip codes or phone numbers, for example.

In the demo below, the input must be no more than 6 characters long, otherwise a validation error is shown.

{{"demo": "TextFieldMaxLength.js", "hideToolbar": true}}

## API

Expand Down
Loading