UI components · Data entry

Input

A native text input in a framed box. Group: Data entry · component 2 of 17, new in silverpoint 0.3.

size="lg"

mode="precision"

substrate="green"

States

The 4 reference states silverpoint declares for Input, live on both grounds, with their code. As in upstream's documentation the examples are uncontrolled: the state's value is the default value. Pick a framework once and every example on the site follows it.

`empty`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/react/ui/input';

<SpInput
  label="Search charts"
  placeholder="Search charts…"
  type="search"
  name="q"
  defaultValue=""
/>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/vue/ui/input';
</script>

<template>
  <SpInput
    label="Search charts"
    placeholder="Search charts…"
    type="search"
    name="q"
    default-value=""
  />
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpInput } from '@silverpoint/angular/ui/input';

@Component({
  selector: 'app-root',
  imports: [SpInput],
  template: `
    <sp-input
      label="Search charts"
      placeholder="Search charts…"
      type="search"
      name="q"
      defaultValue=""
    />
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_input

sp_input(
    label="Search charts",
    placeholder="Search charts…",
    type="search",
    name="q",
    default_value="",
)

`filled`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/react/ui/input';

<SpInput label="City" name="city" defaultValue="Caracas" />

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/vue/ui/input';
</script>

<template>
  <SpInput label="City" name="city" default-value="Caracas" />
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpInput } from '@silverpoint/angular/ui/input';

@Component({
  selector: 'app-root',
  imports: [SpInput],
  template: `
    <sp-input label="City" name="city" defaultValue="Caracas" />
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_input

sp_input(
    label="City",
    name="city",
    default_value="Caracas",
)

`invalid`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/react/ui/input';

<SpInput
  label="City"
  name="city"
  invalid
  message="Required: pick a city"
  defaultValue="Caracas"
/>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/vue/ui/input';
</script>

<template>
  <SpInput
    label="City"
    name="city"
    invalid
    message="Required: pick a city"
    default-value="Caracas"
  />
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpInput } from '@silverpoint/angular/ui/input';

@Component({
  selector: 'app-root',
  imports: [SpInput],
  template: `
    <sp-input
      label="City"
      name="city"
      [invalid]="true"
      message="Required: pick a city"
      defaultValue="Caracas"
    />
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_input

sp_input(
    label="City",
    name="city",
    invalid=True,
    message="Required: pick a city",
    default_value="Caracas",
)

`disabled`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/react/ui/input';

<SpInput label="City" name="city" disabled defaultValue="Caracas" />

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpInput } from '@silverpoint/vue/ui/input';
</script>

<template>
  <SpInput label="City" name="city" disabled default-value="Caracas" />
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpInput } from '@silverpoint/angular/ui/input';

@Component({
  selector: 'app-root',
  imports: [SpInput],
  template: `
    <sp-input label="City" name="city" [disabled]="true" defaultValue="Caracas" />
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_input

sp_input(
    label="City",
    name="city",
    disabled=True,
    default_value="Caracas",
)

Import

Each component has its own subpath under ui/, and every adapter exports them all from ui. Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you.

Framework	Import
React	`import { SpInput } from '@silverpoint/react/ui/input';`
Vue	`import { SpInput } from '@silverpoint/vue/ui/input';`
Angular	`import { SpInput } from '@silverpoint/angular/ui/input'; // <sp-input>`
Reflex	`from reflex_silverpoint_react import sp_input`

Binding the value

Controlled or uncontrolled, the way each framework does it. The change event carries the new value itself (a string, a bool or a number), never a DOM event.

Framework	Controlled	Uncontrolled
React	`value / onChange`	`defaultValue`
Vue	`v-model="x"`	`default-value`
Angular	`[(value)]="x", ngModel, formControl`	`[defaultValue]`
Reflex	`value=State.x, on_change=State.set_x`	`default_value=…`

Props

The props Input adds to the ones every UI component takes.

React / Angular	Vue	Reflex	Type	Description
`type`	`type`	`type`	`Literal['text', 'search', 'email', 'url', 'tel', 'password', 'number']`	Native input type: text (default), search, email, url, tel, password, number.
`placeholder`	`placeholder`	`placeholder`	`str`	Hint shown while empty; not a substitute for the accessible name.
`name`	`name`	`name`	`str`	Form field name; the native input submits under it.
`disabled`	`disabled`	`disabled`	`bool`	Not focusable and not submitted.
`readOnly`	`read-only`	`read_only`	`bool`	Focusable and submitted, but not editable.
`invalid`	`invalid`	`invalid`	`bool`	Sets aria-invalid and draws the exact ⚠ glyph.
`message`	`message`	`message`	`str`	Help or error text under the control, referenced by aria-describedby.
`label`	`label`	`label`	`str`	Accessible name, when no <label for> names the control.
`value`	`value`	`value`	`str`	Controlled value.
`defaultValue`	`default-value`	`default_value`	`str`	Initial value of an uncontrolled input.
`prefix`	`prefix`	`prefix`	`Component`	Content before the text, inside the box.
`suffix`	`suffix`	`suffix`	`Component`	Content after the text, inside the box.
`onChange`	`on-change`	`on_change`	`event`	The new value (a string), not the DOM event.

Common props

Every UI component also takes these. Like a chart's, they fall back to the dashboard the component sits in, then to the provider. Read more about the UI components.

React / Angular	Vue	Reflex	Type	Description
`id`	`id`	`id`	`str`	The frame variant and every related id derive from it.
`ground`	`ground`	`ground`	`Literal['silverpoint', 'cyanotype'] \| str \| dict[str, Any]`	Style ground: "silverpoint" or "cyanotype", or a ground object. Defaults to the dashboard's, then the provider's, or silverpoint.
`substrate`	`substrate`	`substrate`	`Literal['cream', 'green', 'blue', 'ochre', 'prussian']`	Prepared substrate within the ground.
`mode`	`mode`	`mode`	`Literal['ink', 'precision']`	ink by default; precision disables inking.
`seed`	`seed`	`seed`	`str \| int`	Seed of the frame's hand; overrides id for the frame variant only.
`size`	`size`	`size`	`Literal['sm', 'md', 'lg']`	Control size: sm, md (default) or lg.
`palette`	`palette`	`palette`	`dict[str, str]`	Colours over the ground's (set with palette=), merged over the dashboard's and the provider's.
`className`	`class-name`	`class_name`	`str`	Added to the component's root element, after its own classes.

Report it

Found something wrong with SpInput? Open an issue on GitHub — the form comes pre-filled with the component and the version.