{"name":"input","title":"Input","description":"A text input field for forms and user data entry, with built-in styling and accessibility features.","installCommand":"bunx marko-ui add input -y","usageTags":"<Input>","importSnippet":"import TextInput from \"@/components/ui/input/input.marko\";","usageSnippet":"<TextInput type=\"email\" placeholder=\"Email\"/>","tags":["Input"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":["Renders a native `<input>` element, so it inherits every built-in keyboard, screen-reader, and form-submission behavior of the platform control — no ARIA role or custom key handling is added.","Always pair the input with a visible label: either a `Label`/`FieldLabel` with a matching `for`/`id`, or an `aria-label`/`aria-labelledby` when no visible label fits (e.g. an icon-only search field).","Set `aria-invalid=\"true\"` (and, inside a `Field`, `invalid`) when validation fails — screen readers announce the invalid state, and `FieldError` can describe why via `aria-describedby`.","Set `disabled` to remove the control from the tab order and block pointer input; prefer `aria-disabled` with `readonly` instead when the value must still be announced or submitted."],"examples":[{"id":"input-demo","title":"Basic","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"text\" placeholder=\"Email\"/>","description":"A plain text input with a placeholder."},{"id":"input-basic","title":"Basic (text)","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput placeholder=\"Enter text\"/>","description":"A minimal text input with a placeholder."},{"id":"input-label","title":"With label","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div class=\"grid w-full max-w-xs items-center gap-1.5\">\n  <Label for=\"email\">Email</Label>\n  <TextInput type=\"email\" id=\"email\" placeholder=\"Email\"/>\n</div>","description":"Pair an input with a `Label` via a shared `id`."},{"id":"input-field","title":"Field","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field>\n  <FieldLabel for=\"input-field-username\">Username</FieldLabel>\n  <TextInput id=\"input-field-username\" type=\"text\" placeholder=\"Enter your username\"/>\n  <FieldDescription>Choose a unique username for your account.</FieldDescription>\n</Field>","description":"Use `Field`, `FieldLabel`, and `FieldDescription` to create an input with a label and description."},{"id":"input-fieldgroup","title":"Field group","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<FieldGroup>\n  <Field>\n    <FieldLabel for=\"fieldgroup-name\">Name</FieldLabel>\n    <TextInput id=\"fieldgroup-name\" placeholder=\"Jordan Lee\"/>\n  </Field>\n  <Field>\n    <FieldLabel for=\"fieldgroup-email\">Email</FieldLabel>\n    <TextInput id=\"fieldgroup-email\" type=\"email\" placeholder=\"name@example.com\"/>\n    <FieldDescription>We'll send updates to this address.</FieldDescription>\n  </Field>\n  <Field orientation=\"horizontal\">\n    <Button type=\"reset\" variant=\"outline\">Reset</Button>\n    <Button type=\"submit\">Submit</Button>\n  </Field>\n</FieldGroup>","description":"Use `FieldGroup` to show multiple `Field` blocks and to build forms."},{"id":"input-disabled","title":"Disabled","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"text\" placeholder=\"Email\" disabled/>","description":"A disabled input ignores pointer input and is skipped by the tab order. To style the disabled state, add the `data-disabled` attribute to the `Field` component."},{"id":"input-invalid","title":"Invalid","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"email\" placeholder=\"Email\" aria-invalid=\"true\"/>","description":"Set `aria-invalid=\"true\"` to style the input for a failed validation state. To style the invalid state, add the `data-invalid` attribute to the `Field` component.","essential":true},{"id":"input-value","title":"With value","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"text\" value=\"marko-ui\" aria-label=\"Project name\"/>","description":"Pass `value` to render the input pre-filled."},{"id":"input-file","title":"File","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"file\" aria-label=\"Upload file\"/>","description":"Use `type=\"file\"` to create a file picker with matching styling."},{"id":"input-number","title":"Number","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"number\" placeholder=\"0\"/>","description":"Use `type=\"number\"` to restrict input to numeric values."},{"id":"input-password","title":"Password","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<TextInput type=\"password\" placeholder=\"Password\"/>","description":"Use `type=\"password\"` to mask sensitive input."},{"id":"input-inline","title":"Inline","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field orientation=\"horizontal\">\n  <TextInput type=\"search\" placeholder=\"Search...\"/>\n  <Button type=\"button\">Search</Button>\n</Field>","description":"Use `Field` with `orientation=\"horizontal\"` to create an inline input. Pair with `Button` to create a search input with a button."},{"id":"input-grid","title":"Grid","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<FieldGroup class=\"grid max-w-sm grid-cols-2\">\n  <Field>\n    <FieldLabel for=\"grid-first-name\">First Name</FieldLabel>\n    <TextInput id=\"grid-first-name\" placeholder=\"Jordan\"/>\n  </Field>\n  <Field>\n    <FieldLabel for=\"grid-last-name\">Last Name</FieldLabel>\n    <TextInput id=\"grid-last-name\" placeholder=\"Lee\"/>\n  </Field>\n</FieldGroup>","description":"Use a grid layout to place multiple inputs side by side."},{"id":"input-required","title":"Required","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field>\n  <FieldLabel for=\"input-required\">\n    Required Field <span class=\"text-destructive\">*</span>\n  </FieldLabel>\n  <TextInput id=\"input-required\" placeholder=\"This field is required\" required/>\n  <FieldDescription>This field must be filled out.</FieldDescription>\n</Field>","description":"Use the `required` attribute to indicate required inputs."},{"id":"input-badge","title":"Badge","source":"import Badge from \"@marko-ui/shadcn/ui/badge/badge.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field>\n  <FieldLabel for=\"input-badge\">\n    Webhook URL\n    <Badge variant=\"secondary\" class=\"ml-auto\">Beta</Badge>\n  </FieldLabel>\n  <TextInput id=\"input-badge\" type=\"url\" placeholder=\"https://api.example.com/webhook\"/>\n</Field>","description":"Use `Badge` in the label to highlight a recommended field."},{"id":"input-input-group","title":"Input group","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupText from \"@marko-ui/shadcn/ui/input-group/text.marko\";\n\n<Field>\n  <FieldLabel for=\"input-group-url\">Website URL</FieldLabel>\n  <InputGroup>\n    <InputGroupInput id=\"input-group-url\" placeholder=\"example.com\"/>\n    <InputGroupAddon>\n      <InputGroupText>https://</InputGroupText>\n    </InputGroupAddon>\n    <InputGroupAddon align=\"inline-end\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-4\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n        <path d=\"M12 16v-4\"/>\n        <path d=\"M12 8h.01\"/>\n      </svg>\n    </InputGroupAddon>\n  </InputGroup>\n</Field>","description":"To add icons, text, or buttons inside an input, use the `InputGroup` component. See the Input Group component for more examples."},{"id":"input-button-group","title":"Button group","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport ButtonGroup from \"@marko-ui/shadcn/ui/button-group/button-group.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field>\n  <FieldLabel for=\"input-button-group\">Search</FieldLabel>\n  <ButtonGroup>\n    <TextInput id=\"input-button-group\" placeholder=\"Type to search...\"/>\n    <Button type=\"button\" variant=\"outline\">Search</Button>\n  </ButtonGroup>\n</Field>","description":"To add buttons to an input, use the `ButtonGroup` component. See the Button Group component for more examples."},{"id":"input-form","title":"Form","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Select from \"@marko-ui/shadcn/ui/select/select.marko\";\n\nstatic const countries = [\n  { value: \"us\", label: \"United States\" },\n  { value: \"uk\", label: \"United Kingdom\" },\n  { value: \"ca\", label: \"Canada\" },\n];\n\n<form class=\"w-full max-w-sm\">\n  <FieldGroup>\n    <Field>\n      <FieldLabel for=\"form-name\">Name</FieldLabel>\n      <TextInput id=\"form-name\" type=\"text\" placeholder=\"Evil Rabbit\" required/>\n    </Field>\n    <Field>\n      <FieldLabel for=\"form-email\">Email</FieldLabel>\n      <TextInput id=\"form-email\" type=\"email\" placeholder=\"john@example.com\"/>\n      <FieldDescription>We'll never share your email with anyone.</FieldDescription>\n    </Field>\n    <div class=\"grid grid-cols-2 gap-4\">\n      <Field>\n        <FieldLabel for=\"form-phone\">Phone</FieldLabel>\n        <TextInput id=\"form-phone\" type=\"tel\" placeholder=\"+1 (555) 123-4567\"/>\n      </Field>\n      <Field>\n        <FieldLabel for=\"form-country\">Country</FieldLabel>\n        <Select items=countries defaultValue=[\"us\"] placeholder=\"Select a country\"/>\n      </Field>\n    </div>\n    <Field>\n      <FieldLabel for=\"form-address\">Address</FieldLabel>\n      <TextInput id=\"form-address\" type=\"text\" placeholder=\"123 Main St\"/>\n    </Field>\n    <Field orientation=\"horizontal\">\n      <Button type=\"button\" variant=\"outline\">Cancel</Button>\n      <Button type=\"submit\">Submit</Button>\n    </Field>\n  </FieldGroup>\n</form>","description":"A full form example with multiple inputs, a select, and a button.","essential":true},{"id":"input-rtl","title":"RTL","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field dir=\"rtl\">\n  <FieldLabel for=\"input-rtl-api-key\">مفتاح API</FieldLabel>\n  <TextInput id=\"input-rtl-api-key\" type=\"password\" placeholder=\"sk-...\" dir=\"rtl\"/>\n  <FieldDescription>مفتاح API الخاص بك مشفر ومخزن بأمان.</FieldDescription>\n</Field>","description":"Inputs restyle correctly under `dir=\"rtl\"` — logical Tailwind properties, not physical ones, drive layout and text alignment."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}