TextField — Kuito Documentação

Collect editable text. Use it for search, account details and forms.

Bind a search field to state

tsx

import { TextField, VStack, signal, Text } from 'kuito';

export default function Search() {
  const query = signal('');

  return (
    <VStack padding={16} gap={8}>
      <TextField label="Search" placeholder="Artists, albums" type="search" value={query} />
      <Text>{query.value}</Text>
    </VStack>
  );
}

Behavior

Pass a signal as value for two-way input. Choose type for the keyboard and input purpose. A label remains useful to accessibility even when a placeholder disappears. Use format for input formatting, and show validation feedback beside the field.

Continue

Read Keyboard for a complete workflow. See the complete prop reference for types and documented defaults.

Referência

Assinaturas

(props: TextFieldProps): KuitoElement

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`props`	`TextFieldProps`	Sim	—

Devolve

KuitoElement

Props: TextFieldProps

Props (incluindo props herdadas) 107

Nome	Tipo	Obrigatório	Descrição
`format`	`(text: string) => string`	Não	The text the field shows for what the user typed: a card number's groups, a date's slashes. The caret stays after the character it followed. Runs on the UI thread, before the frame, when it can (docs/keyboard.md#formatting).
`onChange`	`(text: string) => void`	Não	The text, as the user changes it.
`onSelectionChange`	`(selection: TextSelection) => void`	Não	The selected range, as the user moves the caret or selects.
`onSubmit`	`(event: SubmitEvent) => void`	Não	—
`onFocus`	`(event: FocusEvent) => void`	Não	—
`onBlur`	`(event: FocusEvent) => void`	Não	—
`id`	`string`	Não	—
`ref`	`ElementRef<ElementHandle>`	Não	—
`class`	`Prop<ClassNames>`	Não	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Não	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`onPress`	`(event: PressEvent) => void`	Não	—
`onPressCapture`	`(event: PressEvent) => void`	Não	—
`key`	`string \| number`	Não	—
`hidden`	`Prop<boolean>`	Não	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Não	—
`paddingTop`	`Prop<LengthPercentage>`	Não	—
`paddingRight`	`Prop<LengthPercentage>`	Não	—
`paddingBottom`	`Prop<LengthPercentage>`	Não	—
`paddingLeft`	`Prop<LengthPercentage>`	Não	—
`width`	`Animatable<SizeValue>`	Não	—
`height`	`Animatable<SizeValue>`	Não	—
`minWidth`	`Prop<SizeValue>`	Não	—
`maxWidth`	`Prop<SizeValue>`	Não	—
`minHeight`	`Prop<SizeValue>`	Não	—
`maxHeight`	`Prop<SizeValue>`	Não	—
`aspectRatio`	`Prop<number>`	Não	Width divided by height; sizes the missing side from the other.
`position`	`Prop<"relative" \| "absolute">`	Não	—
`top`	`Prop<LengthPercentageAuto>`	Não	—
`right`	`Prop<LengthPercentageAuto>`	Não	—
`bottom`	`Prop<LengthPercentageAuto>`	Não	—
`left`	`Prop<LengthPercentageAuto>`	Não	—
`margin`	`Prop<LengthPercentageAuto>`	Não	—
`marginTop`	`Prop<LengthPercentageAuto>`	Não	—
`marginRight`	`Prop<LengthPercentageAuto>`	Não	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Não	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Não	—
`flexGrow`	`Prop<number>`	Não	—
`flexShrink`	`Prop<number>`	Não	—
`flexBasis`	`Prop<SizeValue \| "content">`	Não	—
`flex`	`Prop<number>`	Não	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Não	—
`direction`	`Prop<"ltr" \| "rtl">`	Não	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Não	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Não	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Não	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Não	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Não	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Não	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Não	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Não	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Não	What a screen reader says for the view.
`hint`	`Prop<string>`	Não	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Não	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Não	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Não	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Não	—
`aria-selected`	`Prop<boolean>`	Não	—
`aria-checked`	`Prop<boolean \| "mixed">`	Não	—
`aria-busy`	`Prop<boolean>`	Não	—
`aria-expanded`	`Prop<boolean>`	Não	—
`aria-valuemin`	`Prop<number>`	Não	—
`aria-valuemax`	`Prop<number>`	Não	—
`aria-valuenow`	`Prop<number>`	Não	—
`aria-valuetext`	`Prop<string>`	Não	—
`gestures`	`readonly Composable[]`	Não	The view's gestures; several race unless composed with together or orElse.
`opacity`	`Animatable<number>`	Não	—
`backgroundColor`	`Animatable<string>`	Não	—
`translateX`	`Animatable<number>`	Não	—
`translateY`	`Animatable<number>`	Não	—
`scale`	`Animatable<number>`	Não	—
`scaleX`	`Animatable<number>`	Não	—
`scaleY`	`Animatable<number>`	Não	—
`rotate`	`Animatable<number>`	Não	Degrees.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	Não	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	Não	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Não	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Não	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	Não	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`borderRadius`	`Animatable<number>`	Não	—
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Não	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Não	—
`borderColor`	`Animatable<string>`	Não	—
`shadowColor`	`Animatable<string>`	Não	—
`shadowRadius`	`Animatable<number>`	Não	—
`shadowOffsetX`	`Animatable<number>`	Não	—
`shadowOffsetY`	`Animatable<number>`	Não	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Não	—
`color`	`Prop<string>`	Não	—
`sharedId`	`Prop<string>`	Não	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`value`	`Bound<string>`	Não	The field's text, as HTML's `value`.
`disabled`	`Prop<boolean>`	Não	Takes no presses or input, as HTML `disabled`.
`placeholder`	`Prop<string>`	Não	—
`placeholderColor`	`Prop<string>`	Não	The placeholder's color.
`selectionColor`	`Prop<string>`	Não	The cursor and selection color.
`enterKeyHint`	`Prop<"enter" \| "done" \| "go" \| "next" \| "search" \| "send">`	Não	HTML's `enterkeyhint`: the enter key's label. `next` moves focus to the next input natively.
`submitBehavior`	`Prop<"submit" \| "blurAndSubmit" \| "newline">`	Não	What the enter key does: `newline` (default with `lines`) adds a line; after onSubmit, `blurAndSubmit` (default without) hides the keyboard, or moves to the next input with enterKeyHint `next`, and `submit` keeps the focus.
`autoFocus`	`Prop<boolean>`	Não	Focuses the input once it is on screen.
`type`	`Prop<"number" \| "search" \| "text" \| "password" \| "email" \| "tel" \| "url">`	Não	HTML's input `type`: the keyboard, and `password` hides the text.
`inputMode`	`Prop<InputMode>`	Não	HTML's `inputmode`: the keyboard to show instead of the type's; `none` shows none.
`autoComplete`	`Prop<"off" \| "email" \| "tel" \| "username" \| "current-password" \| "new-password" \| "one-time-code" \| "name" \| "given-name" \| "family-name" \| "street-address" \| "postal-code" \| "country-name" \| "cc-number">`	Não	HTML's `autocomplete`: what the field holds, for autofill and the password manager.
`autoCapitalize`	`Prop<"none" \| "sentences" \| "words" \| "characters">`	Não	HTML's `autocapitalize`. Unset, `sentences` for `text` and `search` fields and `none` for the others.
`maxLength`	`Prop<number>`	Não	HTML's `maxlength`: the most UTF-16 code units the user can enter. Text the app sets is not cut.
`spellCheck`	`Prop<boolean>`	Não	HTML's `spellcheck`, which also turns autocorrection on or off. Unset, on for `text` and `search` fields.
`lines`	`Prop<number \| { min?: number; max?: number;}>`	Não	Wraps the text over lines: a count sets the height, `{ min, max }` grows with the text (1 and no limit by default). Adding or removing it remounts the field.
`selection`	`Bound<TextSelection>`	Não	The selected range, `{ start, end }` in UTF-16 offsets as HTML's `selectionStart` and `selectionEnd`; `start === end` is the caret. Two-way when given a signal; unset, the caret goes to the end.

format — assinaturas de método

Assinaturas

(text: string): string

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`text`	`string`	Sim	—

Devolve

string

onChange — assinaturas de método

Assinaturas

(text: string): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`text`	`string`	Sim	—

Devolve

void

onSelectionChange — assinaturas de método

Assinaturas

(selection: TextSelection): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`selection`	`TextSelection`	Sim	—

Devolve

void

onSubmit — assinaturas de método

Assinaturas

(event: SubmitEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`SubmitEvent`	Sim	—

Devolve

void

onFocus — assinaturas de método

Assinaturas

(event: FocusEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`FocusEvent`	Sim	—

Devolve

void

onBlur — assinaturas de método

Assinaturas

(event: FocusEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`FocusEvent`	Sim	—

Devolve

void

onPress — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onPressCapture — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onAction — assinaturas de método

Assinaturas

(event: AccessibilityActionEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`AccessibilityActionEvent`	Sim	—

Devolve

void

backgroundGradient — campos aninhados

backgroundGradient campos

Nome	Tipo	Obrigatório	Descrição
`angle`	`number`	Sim	—
`colors`	`string[]`	Sim	—

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.

#Bind a search field to state

#Behavior

#Continue

Referência

Assinaturas

Parâmetros

Devolve

Props (incluindo props herdadas) 107

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

backgroundGradient campos

Bind a search field to state

Behavior

Continue