Favorite Pokemon

); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Input, Label } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" InputStyleWithLabel"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"grid w-full max-w-sm items-center gap-1.5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Label"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pokemon"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Favorite Pokemon"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Input"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pokemon"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pokemon"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"Charmander"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h3,{id:"error",children:"Error"}),` `,(0,l.jsx)(r,{name:"input-style-error",children:(0,l.jsx)(n.figure,{__src__:"preview/components/input-style-error.tsx",__rawString__:`import { Input, Label } from "@/components/ui"; export default function InputStyleError() { return (

Favorite Pokemon

Please provide a valid pokemon!

); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Input, Label } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" InputStyleError"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"grid w-full max-w-sm items-center gap-1.5"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Label"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pokemon"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Favorite Pokemon"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Input"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pokemon"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"pokemon"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"Charmander"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" defaultValue"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"Son Goku"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" aria-invalid"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"text-sm text-red-500"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Please provide a valid pokemon!"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{})]})}function b(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(p,e)})):p(e)}var D=b;function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(S);})(); ;return Component;

Input

Installation

Examples

Default

With label

Error