1"use strict";(globalThis.webpackChunksui_dapp_starter_dev=globalThis.webpackChunksui_dapp_starter_dev||[]).push([[5983],{4010:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>o,contentTitle:()=>l,default:()=>h,frontMatter:()=>d,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"frontend/kit/AmountInput","title":"AmountInput","description":"AmountInput is a React component that provides input functionality for SUI token amounts with validation and error handling.","source":"@site/docs/frontend/kit/AmountInput.md","sourceDirName":"frontend/kit","slug":"/frontend/kit/AmountInput","permalink":"/docs/frontend/kit/AmountInput","draft":false,"unlisted":false,"editUrl":"https://github.com/suiware/sui-dapp-starter.dev/tree/main/docs/frontend/kit/AmountInput.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"AddressInput","permalink":"/docs/frontend/kit/AddressInput"},"next":{"title":"Balance","permalink":"/docs/frontend/kit/Balance"}}');var i=t(7259),r=t(9796);const d={},l="AmountInput",o={},a=[{value:"Usage",id:"usage",level:2},{value:"Props",id:"props",level:2},{value:"Features",id:"features",level:2},{value:"Validation Rules",id:"validation-rules",level:2},{value:"Example with Custom Styling",id:"example-with-custom-styling",level:2}];function c(n){const e={code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...n.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.header,{children:(0,i.jsx)(e.h1,{id:"amountinput",children:"AmountInput"})}),"\n",(0,i.jsxs)(e.p,{children:[(0,i.jsx)(e.code,{children:"AmountInput"})," is a React component that provides input functionality for SUI token amounts with validation and error handling."]}),"\n",(0,i.jsx)(e.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-tsx",children:"import { AmountInput } from '@suiware/kit';\n\nfunction MyComponent() {\n const [amount, setAmount] = useState('');\n\n return (\n <AmountInput\n value={amount}\n onChange={setAmount}\n />\n );\n}\n"})}),"\n",(0,i.jsx)(e.h2,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Description"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"value"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"The input value"}),(0,i.jsx)(e.td,{children:"Required"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"onChange"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"(value: string) => void"})}),(0,i.jsx)(e.td,{children:"Callback function when value changes"}),(0,i.jsx)(e.td,{children:"Required"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"placeholder"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"Input placeholder text"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"'Enter SUI amount'"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"className"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"Additional CSS class names"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"''"})})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"disabled"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:"Whether the input is disabled"}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"false"})})]})]})]}),"\n",(0,i.jsx)(e.h2,{id:"features",children:"Features"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Validates numeric input values"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Allows decimal points for fractional amounts"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Prevents negative values"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Real-time val
1idation with error state display"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Customizable styling via className prop"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Controlled component with value/onChange pattern"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.h2,{id:"validation-rules",children:"Validation Rules"}),"\n",(0,i.jsx)(e.p,{children:"The component validates input according to these rules:"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Only numbers and a single decimal point are allowed"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"No negative values"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Empty input is considered valid"}),"\n"]}),"\n",(0,i.jsxs)(e.li,{children:["\n",(0,i.jsx)(e.p,{children:"Non-numeric characters are rejected"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(e.p,{children:"Invalid inputs display an error message"}),"\n",(0,i.jsx)(e.h2,{id:"example-with-custom-styling",children:"Example with Custom Styling"}),"\n",(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-tsx",children:"import { AmountInput } from '@suiware/kit';\n\nfunction MyComponent() {\n const [amount, setAmount] = useState('');\n\n return (\n <AmountInput\n value={amount}\n onChange={setAmount}\n className=\"custom-input\"\n placeholder=\"Enter amount in SUI\"\n />\n );\n}\n"})})]})}function h(n={}){const{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,i.jsx)(e,{...n,children:(0,i.jsx)(c,{...n})}):c(n)}},9796:(n,e,t)=>{t.d(e,{R:()=>d,x:()=>l});var s=t(6363);const i={},r=s.createContext(i);function d(n){const e=s.useContext(r);return s.useMemo(function(){return"function"==typeof n?n(e):{...e,...n}},[e,n])}function l(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(i):n.components||i:d(n.components),s.createElement(r.Provider,{value:e},n.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.