---
title: Input.Inline
category: Forms
summary: Composes [Input.InputField](/input.inputfield) with minimal styling.
---

```jsx live
render(() => (
  <Box padding={2} backgroundColor="primary">
    <Input.Inline light size="xl" placeholder="Inline Input" />
  </Box>
))
```

```jsx live
function App() {
  const [value, setValue] = React.useState('Editable Title')
  return (
    <Card width={48}>
      <Card.Section
        axis="horizontal"
        alignment="center"
        padding={2}
        spacing={2}
        backgroundColor="surfaceTertiary"
        overflow="auto"
      >
        <Icon name="person" size="xl" />
        <Input.Inline
          highlightColor="dark-1"
          size="xl"
          fontSize={0}
          placeholder="Placeholder"
          value={value}
          onChange={(event) => setValue(event.target.value)}
        />
      </Card.Section>
      <Card.Section padding={2}>Content</Card.Section>
    </Card>
  )
}
render(<App />)
```