@vellira-ui/react 2.31.0 → 2.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,6 +88,77 @@ Use `description` for settings-style helper text when the checkbox is not
|
|
|
88
88
|
wrapped in `FormField`. For checkbox rows without a visible label, provide
|
|
89
89
|
`aria-label` or `aria-labelledby`.
|
|
90
90
|
|
|
91
|
+
```tsx
|
|
92
|
+
import { Checkbox } from '@vellira-ui/react';
|
|
93
|
+
import { useState } from 'react';
|
|
94
|
+
|
|
95
|
+
export function TermsCheckbox() {
|
|
96
|
+
const [accepted, setAccepted] = useState(false);
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<Checkbox
|
|
100
|
+
label='Accept terms'
|
|
101
|
+
description='Required to continue.'
|
|
102
|
+
checked={accepted}
|
|
103
|
+
onCheckedChange={setAccepted}
|
|
104
|
+
required
|
|
105
|
+
color='primary'
|
|
106
|
+
size='md'
|
|
107
|
+
/>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Radio Notes
|
|
113
|
+
|
|
114
|
+
Use standalone `Radio` for low-level composition. Prefer `RadioGroup` when the
|
|
115
|
+
choice belongs to a single saved form value.
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
import { Radio, RadioGroup } from '@vellira-ui/react';
|
|
119
|
+
import { useState } from 'react';
|
|
120
|
+
|
|
121
|
+
export function PlanRadioGroup() {
|
|
122
|
+
const [plan, setPlan] = useState('pro');
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<RadioGroup
|
|
126
|
+
name='plan'
|
|
127
|
+
label='Plan'
|
|
128
|
+
description='Choose the billing plan.'
|
|
129
|
+
value={plan}
|
|
130
|
+
onValueChange={setPlan}
|
|
131
|
+
color='primary'
|
|
132
|
+
size='md'
|
|
133
|
+
>
|
|
134
|
+
<Radio value='starter' label='Starter' />
|
|
135
|
+
<Radio value='pro' label='Pro' />
|
|
136
|
+
<Radio value='enterprise' label='Enterprise' />
|
|
137
|
+
</RadioGroup>
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### FormField Notes
|
|
143
|
+
|
|
144
|
+
Use `FormField` for custom controls that do not render their own field chrome.
|
|
145
|
+
`bindControl` is useful for native form controls because it injects generated
|
|
146
|
+
ids and ARIA state into the direct child.
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
import { FormField } from '@vellira-ui/react';
|
|
150
|
+
|
|
151
|
+
<FormField
|
|
152
|
+
label='Workspace'
|
|
153
|
+
description='Connected through generated id and aria props.'
|
|
154
|
+
error='Use lowercase letters, numbers and hyphens.'
|
|
155
|
+
required
|
|
156
|
+
bindControl
|
|
157
|
+
>
|
|
158
|
+
<input placeholder='vellira-design' />
|
|
159
|
+
</FormField>;
|
|
160
|
+
```
|
|
161
|
+
|
|
91
162
|
### Select Notes
|
|
92
163
|
|
|
93
164
|
Use `Select` for one form value from a compact list, `RadioGroup` for a few
|