Text Field
Text Field keeps the portable semantics on one visible label, one native input, optional supporting or error text, and a small state set. The web API stays on one namespaced root hook, two optional message hooks, and native input attributes.
Public web API
The wrapper and message hooks are the key structure. The examples below then show intended states and input types.
<div data-bitsy-text-field>
<label for="signup-email">Email address</label>
<input
id="signup-email"
name="signup-email"
type="email"
autocomplete="email"
aria-describedby="signup-email-help"
/>
<p id="signup-email-help" data-bitsy-text-field-description>
We only send product updates you ask for.
</p>
</div>
<div data-bitsy-text-field>
<label for="account-password">Password</label>
<input
id="account-password"
name="account-password"
type="password"
aria-invalid="true"
aria-describedby="account-password-error"
/>
<p id="account-password-error" data-bitsy-text-field-error>
Use at least 12 characters.
</p>
</div>Intent stays on the native type value. The wrapper and optional message hooks are the current web implementation API.
Input types and states
Group the examples by intent so the page reads as reference material instead of a stack of unrelated form fragments.
Use the native search type when the field is truly a query.
We use this for release notes and account alerts only.
Use at least 12 characters.
Readonly keeps the value available without allowing edits.
Disabled keeps the field present but unavailable.
Foundation versus Bit
Raw inputs still inherit the foundation baseline. data-bitsy-text-field adds the field-level structure, message hooks, and state treatment that turn one input into the first explicit Text Field Bit without pulling in multiline fields, grouped controls, or JavaScript-heavy behavior.