TextField

1"use client";2
3// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.4import { Input, Label, TextField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });7
8export function Basic() {9  return (10    <TextField name="email" xstyle={styles.field}>11      <Label>Email</Label>12      <Input type="email" placeholder="Enter your email" />13    </TextField>14  );15}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, Input, Label, Surface, TextArea, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: {7    display: "flex",8    width: "100%",9    minWidth: 340,10    flexDirection: "column",11    gap: 16,12    borderRadius: 24,13    padding: 24,14  },15});16export function OnSurface() {17  return (18    <Surface xstyle={styles.root}>19      <TextField name="name">20        <Label>Your name</Label>21        <Input fullWidth variant="secondary" placeholder="John" />22        <Description>We'll never share this with anyone else</Description>23      </TextField>24      <TextField name="email">25        <Label>Email</Label>26        <Input type="email" fullWidth variant="secondary" placeholder="[email protected]" />27      </TextField>28      <TextField name="bio">29        <Label>Bio</Label>30        <TextArea fullWidth variant="secondary" placeholder="Tell us about yourself..." rows={4} />31        <Description>Minimum 4 rows</Description>32      </TextField>33    </Surface>34  );35}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });6export function WithDescription() {7  return (8    <TextField xstyle={styles.field} name="username">9      <Label>Username</Label>10      <Input placeholder="Enter username" />11      <Description>Choose a unique username for your account</Description>12    </TextField>13  );14}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });6export function Required() {7  return (8    <TextField xstyle={styles.field} name="fullName">9      <Label>Full Name</Label>10      <Input required placeholder="John Doe" />11      <Description>This field is required</Description>12    </TextField>13  );14}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });6export function Disabled() {7  return (8    <TextField disabled xstyle={styles.field} name="accountId">9      <Label>Account ID</Label>10      <Input value="USR-12345" placeholder="Auto-generated" />11      <Description>This field cannot be edited</Description>12    </TextField>13  );14}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { FieldError, Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { display: "flex", width: 400, flexDirection: "column", gap: 16 },7});8export function FullWidth() {9  return (10    <div {...stylex.props(styles.root)}>11      <TextField fullWidth name="name">12        <Label>Your name</Label>13        <Input placeholder="John" />14      </TextField>15      <TextField fullWidth invalid name="password">16        <Label>Password</Label>17        <Input required type="password" />18        <FieldError match>Password must be longer than 8 characters</FieldError>19      </TextField>20    </div>21  );22}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, FieldError, Input, Label, TextArea, TextField } from "@lenso/ui";4import * as React from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  root: { display: "flex", width: "100%", maxWidth: 256, flexDirection: "column", gap: 16 },8});9export function Validation() {10  const [username, setUsername] = React.useState("");11  const [bio, setBio] = React.useState("");12  const isUsernameInvalid = username.length > 0 && username.length < 3;13  const isBioInvalid = bio.length > 0 && bio.length < 20;14  return (15    <div {...stylex.props(styles.root)}>16      <TextField invalid={isUsernameInvalid} name="username">17        <Label>Username</Label>18        <Input required value={username} onValueChange={setUsername} placeholder="jane_doe" />19        {isUsernameInvalid ? (20          <FieldError match>Username must be at least 3 characters.</FieldError>21        ) : (22          <Description style={{ display: "block" }}>23            Choose a unique username for your profile.24          </Description>25        )}26      </TextField>27      <TextField invalid={isBioInvalid} name="bio">28        <Label>Bio</Label>29        <TextArea30          required31          value={bio}32          onValueChange={setBio}33          placeholder="Tell us about yourself..."34        />35        {isBioInvalid ? (36          <FieldError match>Bio must contain at least 20 characters.</FieldError>37        ) : (38          <Description style={{ display: "block" }}>39            Minimum 20 characters ({bio.length}/20).40          </Description>41        )}42      </TextField>43    </div>44  );45}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, Input, Label, TextArea, TextField } from "@lenso/ui";4import * as React from "react";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({7  root: { display: "flex", width: "100%", maxWidth: 256, flexDirection: "column", gap: 16 },8});9export function Controlled() {10  const [name, setName] = React.useState("");11  const [bio, setBio] = React.useState("");12  return (13    <div {...stylex.props(styles.root)}>14      <TextField name="name">15        <Label>Display name</Label>16        <Input placeholder="Jane" value={name} onValueChange={setName} />17        <Description>Characters: {name.length}</Description>18      </TextField>19      <TextField name="bio">20        <Label>Bio</Label>21        <TextArea placeholder="Tell us about yourself..." value={bio} onValueChange={setBio} />22        <Description>Characters: {bio.length} / 200</Description>23      </TextField>24    </div>25  );26}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { FieldError, Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });6export function WithError() {7  return (8    <TextField invalid xstyle={styles.field} name="email">9      <Label>Email</Label>10      <Input type="email" placeholder="[email protected]" />11      <FieldError match>Please enter a valid email address</FieldError>12    </TextField>13  );14}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, Label, TextArea, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });6export function TextAreaExample() {7  return (8    <TextField xstyle={styles.field} name="message">9      <Label>Message</Label>10      <TextArea placeholder="Write your message here..." rows={4} />11      <Description>Maximum 500 characters</Description>12    </TextField>13  );14}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { display: "flex", width: "100%", maxWidth: 256, flexDirection: "column", gap: 16 },7});8export function InputTypes() {9  return (10    <div {...stylex.props(styles.root)}>11      <TextField name="password">12        <Label>Password</Label>13        <Input type="password" placeholder="••••••••" />14      </TextField>15      <TextField name="age">16        <Label>Age</Label>17        <Input type="number" max="150" min="0" placeholder="21" />18      </TextField>19      <TextField name="email">20        <Label>Email</Label>21        <Input type="email" placeholder="[email protected]" />22      </TextField>23      <TextField name="website">24        <Label>Website</Label>25        <Input type="url" placeholder="https://example.com" />26      </TextField>27      <TextField name="phone">28        <Label>Phone</Label>29        <Input type="tel" placeholder="+1 (555) 000-0000" />30      </TextField>31    </div>32  );33}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });6export function RenderFunction() {7  return (8    <TextField9      xstyle={styles.field}10      name="email"11      render={(props) => <div {...props} data-custom="foo" />}12    >13      <Label>Email</Label>14      <Input type="email" placeholder="Enter your email" />15    </TextField>16  );17}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Input, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { width: "100%", maxWidth: 256, gap: 6 },7  label: {8    fontWeight: 500,9    color: { default: "oklch(26.9% 0 0)", ':is(.dark *, [data-theme="dark"] *)': "oklch(97% 0 0)" },10  },11  input: {12    fontSize: 14,13    borderRadius: 12,14    borderWidth: 1,15    borderStyle: "solid",16    borderColor: "color-mix(in oklab, var(--border) 80%, transparent)",17    backgroundColor: "var(--surface)",18    color: { default: "oklch(26.9% 0 0)", ':is(.dark *, [data-theme="dark"] *)': "oklch(97% 0 0)" },19    boxShadow: {20      default: "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 1px rgb(0 0 0 / .05)",21      ":focus-visible": "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 2px oklch(70.8% 0 0 / .25)",22      ':is(.dark *, [data-theme="dark"] *)':23        "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 1px rgb(255 255 255 / .1)",24      ':is(.dark *, [data-theme="dark"] *):focus-visible':25        "0 1px 2px 0 rgb(0 0 0 / .05), 0 0 0 2px oklch(55.6% 0 0 / .3)",26    },27    transitionProperty: "box-shadow, border-color",28    transitionDuration: "150ms",29    "::placeholder": {30      color: {31        default: "oklch(70.8% 0 0)",32        ':is(.dark *, [data-theme="dark"] *)': "oklch(55.6% 0 0)",33      },34    },35  },36});37export function CustomStyles() {38  return (39    <TextField xstyle={styles.root} name="email">40      <Label xstyle={styles.label}>Email</Label>41      <Input type="email" xstyle={styles.input} placeholder="[email protected]" />42    </TextField>43  );44}

1"use client";2
3// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.4import { Input, Label, TextField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });7
8export function Basic() {9  return (10    <TextField name="email" xstyle={styles.field}>11      <Label>Email</Label>12      <Input type="email" placeholder="Enter your email" />13    </TextField>14  );15}