blob: 59cdd28acaf281994c2095e3cc65c12654deda5c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
import FieldGrid from './field-grid'
import { TextField } from '@react-spectrum/s2/TextField'
import { TextArea } from '@react-spectrum/s2/TextArea'
import { SearchField } from '@react-spectrum/s2/SearchField'
import { ContextualHelp, Heading, Content } from '@react-spectrum/s2/ContextualHelp'
import styles from './form-examples.module.css'
export default function TextFields() {
return (
<section className={styles.section} aria-labelledby="text-fields-title">
<h2 id="text-fields-title">文本输入</h2>
<FieldGrid>
<TextField name="username" label="用户名" isRequired minLength={3} maxLength={20}
description="3–20 个字符；输入 admin 可体验提交后的业务校验。"
contextualHelp={<ContextualHelp><Heading>用户名</Heading><Content>可使用字母、数字和下划线。</Content></ContextualHelp>}
validate={(value) => value && !/^[a-zA-Z0-9_]+$/.test(value) ? '只能包含字母、数字和下划线。' : null} />
<TextField name="email" label="邮箱" type="email" isRequired placeholder="name@example.com" />
<TextField name="password" label="密码" type="password" minLength={8} description="选填，至少 8 位；提交预览中隐藏密码。" />
<TextField name="website" label="网址" type="url" placeholder="https://example.com" />
<TextField name="phone" label="电话" type="tel" placeholder="输入联系电话" />
<SearchField name="keyword" label="搜索关键词" description="支持输入与一键清空。" />
<TextArea name="bio" label="多行简介" maxLength={200} description="最多 200 个字符。" />
<TextField name="reference" label="只读字段" value="FORM-DEMO-001" isReadOnly />
<TextField label="禁用字段" defaultValue="不可编辑，也不参与提交" isDisabled />
</FieldGrid>
</section>
)
}
|
