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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
// @ts-nocheck
import * as mod from "./text-field"
import { create } from "../storybook/scaffold"
const docs = `### Overview
Text input with label, description, and optional copy-to-clipboard action.
Pair with \`Tooltip\` and \`IconButton\` for copy affordance (built in).
### API
- Supports Kobalte TextField props: \`value\`, \`defaultValue\`, \`onChange\`, \`disabled\`, \`readOnly\`.
- Optional: \`label\`, \`description\`, \`error\`, \`variant\`, \`copyable\`, \`multiline\`.
### Variants and states
- Normal and ghost variants.
- Supports multiline textarea.
### Behavior
- When \`copyable\` is true, clicking copies the current value.
### Accessibility
- Label is hidden when \`hideLabel\` is true (sr-only).
### Theming/tokens
- Uses \`data-component="input"\` with slot attributes for styling.
`
const story = create({
title: "UI/TextField",
mod,
args: {
label: "Label",
placeholder: "Type here...",
defaultValue: "Hello",
},
})
export default {
title: "UI/TextField",
id: "components-text-field",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
}
export const Basic = story.Basic
export const Variants = {
render: () => (
<div style={{ display: "grid", gap: "12px", width: "320px" }}>
<mod.TextField label="Normal" placeholder="Type here..." defaultValue="Value" />
<mod.TextField label="Ghost" variant="ghost" placeholder="Type here..." defaultValue="Value" />
</div>
),
}
export const Multiline = {
args: {
label: "Description",
multiline: true,
defaultValue: "Line one\nLine two",
},
}
export const Copyable = {
args: {
label: "Invite link",
defaultValue: "https://example.com/invite/abc",
copyable: true,
copyKind: "link",
},
}
export const Error = {
args: {
label: "Email",
defaultValue: "invalid@",
error: "Enter a valid email address",
},
}
export const Disabled = {
args: {
label: "Disabled",
defaultValue: "Readonly",
disabled: true,
},
}
export const ReadOnly = {
args: {
label: "Read only",
defaultValue: "Read only value",
readOnly: true,
},
}
export const HiddenLabel = {
args: {
label: "Hidden label",
hideLabel: true,
placeholder: "Hidden label",
},
}
|
